@vkontakte/vkui-tokens 4.78.1 → 4.80.0

package/themes/legoAndroidDark/index.json

@@ -6,7 +6,10 @@
 	"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)",
+	"blurS": 8,
 	"blurM": 16,
+	"blurL": 48,
+	"blurXL": 96,
 	"fontFamilyFallbacks": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
 	"fontFamilyAccent": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
 	"fontFamilyBase": "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif",
@@ -497,6 +500,26 @@
 			}
 		}
 	},
+	"fontTextBold": {
+		"regular": {
+			"fontSize": 16,
+			"lineHeight": 18.5,
+			"fontWeight": 670,
+			"fontVariationSettings": {
+				"opticalSize": 21.8
+			}
+		}
+	},
+	"fontFootnoteBold": {
+		"regular": {
+			"fontSize": 13.5,
+			"lineHeight": 15,
+			"fontWeight": 670,
+			"fontVariationSettings": {
+				"opticalSize": 20
+			}
+		}
+	},
 	"gradientBlack": "rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.02) 15%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.32) 70%, rgba(0, 0, 0, 0.38) 85%, rgba(0, 0, 0, 0.4) 100%",
 	"gradientWhite": "rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 15%, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0.95) 85%, rgba(255, 255, 255, 1) 100%",
 	"gradientTint": "rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.05) 15%, rgba(20, 20, 20, 0.2) 30%, rgba(20, 20, 20, 0.8) 70%, rgba(20, 20, 20, 0.95) 85%, var(--vkui--color_background_tertiary, rgba(20, 20, 20, 1)) 100%",
@@ -622,7 +645,7 @@
 		"active": "#D7D8DB"
 	},
 	"colorBackgroundContrastSecondaryAlpha": {
-		"normal": "rgba(255, 255, 255, 0.2)",
+		"normal": "#ffffff33",
 		"hover": "rgba(255, 255, 255, 0.24)",
 		"active": "rgba(255, 255, 255, 0.28)"
 	},
@@ -632,9 +655,9 @@
 		"active": "#141414"
 	},
 	"colorBackgroundContrastThemed": {
-		"normal": "#000000",
-		"hover": "#0A0A0A",
-		"active": "#141414"
+		"normal": "#1e1e1c",
+		"hover": "#272725",
+		"active": "#30302E"
 	},
 	"colorBackgroundModal": {
 		"normal": "#000000",
@@ -662,7 +685,7 @@
 		"active": "#574429"
 	},
 	"colorBackgroundNegative": {
-		"normal": "#FD6571",
+		"normal": "#fd6571",
 		"hover": "#FD6B77",
 		"active": "#FD717C"
 	},
@@ -747,7 +770,7 @@
 		"active": "#44CB66"
 	},
 	"colorTextNegative": {
-		"normal": "#FD6571",
+		"normal": "#fd6571",
 		"hover": "#FD6B77",
 		"active": "#FD717C"
 	},
@@ -857,7 +880,7 @@
 		"active": "#FF7514"
 	},
 	"colorIconNegative": {
-		"normal": "#FD6571",
+		"normal": "#fd6571",
 		"hover": "#FD6B77",
 		"active": "#FD717C"
 	},
@@ -902,7 +925,7 @@
 		"active": "#44CB66"
 	},
 	"colorStrokeNegative": {
-		"normal": "#FD6571",
+		"normal": "#fd6571",
 		"hover": "#FD6B77",
 		"active": "#FD717C"
 	},
@@ -1112,9 +1135,9 @@
 		"active": "#818385"
 	},
 	"colorTransparent": {
-		"normal": "#00000000",
-		"hover": "rgba(0, 0, 0, 0.04)",
-		"active": "rgba(0, 0, 0, 0.08)"
+		"normal": "transparent",
+		"hover": "rgba(255, 255, 255, 0.04)",
+		"active": "rgba(255, 255, 255, 0.08)"
 	},
 	"colorBackgroundInverse": {
 		"normal": "#FFFFFF",
@@ -1122,7 +1145,7 @@
 		"active": "#D7D8DB"
 	},
 	"colorStrokeContrastSecondaryAlpha": {
-		"normal": "#ffffff1f",
+		"normal": "#ffffff1e",
 		"hover": "rgba(255, 255, 255, 0.16)",
 		"active": "rgba(255, 255, 255, 0.2)"
 	},
@@ -1536,5 +1559,10 @@
 		"hover": "#0A0A0A",
 		"active": "#141414"
 	},
+	"colorTextTertiaryAlpha": {
+		"normal": "#ffffff7f",
+		"hover": "rgba(255, 255, 255, 0.54)",
+		"active": "rgba(255, 255, 255, 0.58)"
+	},
 	"themeType": "root"
 }

package/themes/legoAndroidDark/index.less

@@ -5,7 +5,10 @@
 @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);
+@blur-s: 8px;
 @blur-m: 16px;
+@blur-l: 48px;
+@blur-x-l: 96px;
 @font-family-fallbacks: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 @font-family-accent: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 @font-family-base: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
@@ -202,15 +205,15 @@
 @color-background-contrast: #FFFFFF;
 @color-background-contrast--hover: #EBEDF0;
 @color-background-contrast--active: #D7D8DB;
-@color-background-contrast-secondary-alpha: rgba(255, 255, 255, 0.2);
+@color-background-contrast-secondary-alpha: #ffffff33;
 @color-background-contrast-secondary-alpha--hover: rgba(255, 255, 255, 0.24);
 @color-background-contrast-secondary-alpha--active: rgba(255, 255, 255, 0.28);
 @color-background-contrast-inverse: #000000;
 @color-background-contrast-inverse--hover: #0A0A0A;
 @color-background-contrast-inverse--active: #141414;
-@color-background-contrast-themed: #000000;
-@color-background-contrast-themed--hover: #0A0A0A;
-@color-background-contrast-themed--active: #141414;
+@color-background-contrast-themed: #1e1e1c;
+@color-background-contrast-themed--hover: #272725;
+@color-background-contrast-themed--active: #30302E;
 @color-background-modal: #000000;
 @color-background-modal--hover: #0A0A0A;
 @color-background-modal--active: #141414;
@@ -226,7 +229,7 @@
 @color-background-warning: #483416;
 @color-background-warning--hover: #4F3C1F;
 @color-background-warning--active: #574429;
-@color-background-negative: #FD6571;
+@color-background-negative: #fd6571;
 @color-background-negative--hover: #FD6B77;
 @color-background-negative--active: #FD717C;
 @color-background-negative-tint: #4b2727;
@@ -277,7 +280,7 @@
 @color-text-positive: #34c759;
 @color-text-positive--hover: #3CC960;
 @color-text-positive--active: #44CB66;
-@color-text-negative: #FD6571;
+@color-text-negative: #fd6571;
 @color-text-negative--hover: #FD6B77;
 @color-text-negative--active: #FD717C;
 @color-text-link: #2e90ff;
@@ -343,7 +346,7 @@
 @color-icon-warning: #ff6900;
 @color-icon-warning--hover: #FF6F0A;
 @color-icon-warning--active: #FF7514;
-@color-icon-negative: #FD6571;
+@color-icon-negative: #fd6571;
 @color-icon-negative--hover: #FD6B77;
 @color-icon-negative--active: #FD717C;
 @color-stroke-accent: #529ef4;
@@ -370,7 +373,7 @@
 @color-stroke-positive: #34c759;
 @color-stroke-positive--hover: #3CC960;
 @color-stroke-positive--active: #44CB66;
-@color-stroke-negative: #FD6571;
+@color-stroke-negative: #fd6571;
 @color-stroke-negative--hover: #FD6B77;
 @color-stroke-negative--active: #FD717C;
 @color-stroke-contrast: #FFFFFF;
@@ -496,13 +499,13 @@
 @color-tabbar-text-inactive: #76787a;
 @color-tabbar-text-inactive--hover: #7B7D7F;
 @color-tabbar-text-inactive--active: #818385;
-@color-transparent: #00000000;
-@color-transparent--hover: rgba(0, 0, 0, 0.04);
-@color-transparent--active: rgba(0, 0, 0, 0.08);
+@color-transparent: transparent;
+@color-transparent--hover: rgba(255, 255, 255, 0.04);
+@color-transparent--active: rgba(255, 255, 255, 0.08);
 @color-background-inverse: #FFFFFF;
 @color-background-inverse--hover: #EBEDF0;
 @color-background-inverse--active: #D7D8DB;
-@color-stroke-contrast-secondary-alpha: #ffffff1f;
+@color-stroke-contrast-secondary-alpha: #ffffff1e;
 @color-stroke-contrast-secondary-alpha--hover: rgba(255, 255, 255, 0.16);
 @color-stroke-contrast-secondary-alpha--active: rgba(255, 255, 255, 0.2);
 @vkontakte-color-snippet-border-alpha: rgba(255, 255, 255, 0.15);
@@ -751,6 +754,9 @@
 @vkontakte-palette-black: #000000;
 @vkontakte-palette-black--hover: #0A0A0A;
 @vkontakte-palette-black--active: #141414;
+@color-text-tertiary-alpha: #ffffff7f;
+@color-text-tertiary-alpha--hover: rgba(255, 255, 255, 0.54);
+@color-text-tertiary-alpha--active: rgba(255, 255, 255, 0.58);
 
 
 .font-display-title1--regular {
@@ -923,6 +929,16 @@
 	line-height: 21px;
 	font-weight: 520;
 }
+.font-text-bold--regular {
+	font-size: 16px;
+	line-height: 18.5px;
+	font-weight: 670;
+}
+.font-footnote-bold--regular {
+	font-size: 13.5px;
+	line-height: 15px;
+	font-weight: 670;
+}
 .font-headline--regular {
 	font-size: 17px;
 	line-height: 20px;

package/themes/legoAndroidDark/index.pcss

@@ -6,7 +6,10 @@
 	--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);
+	--blur-s: 8px;
 	--blur-m: 16px;
+	--blur-l: 48px;
+	--blur-x-l: 96px;
 	--font-family-fallbacks: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--font-family-accent: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--font-family-base: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
@@ -203,15 +206,15 @@
 	--color-background-contrast: #FFFFFF;
 	--color-background-contrast--hover: #EBEDF0;
 	--color-background-contrast--active: #D7D8DB;
-	--color-background-contrast-secondary-alpha: rgba(255, 255, 255, 0.2);
+	--color-background-contrast-secondary-alpha: #ffffff33;
 	--color-background-contrast-secondary-alpha--hover: rgba(255, 255, 255, 0.24);
 	--color-background-contrast-secondary-alpha--active: rgba(255, 255, 255, 0.28);
 	--color-background-contrast-inverse: #000000;
 	--color-background-contrast-inverse--hover: #0A0A0A;
 	--color-background-contrast-inverse--active: #141414;
-	--color-background-contrast-themed: #000000;
-	--color-background-contrast-themed--hover: #0A0A0A;
-	--color-background-contrast-themed--active: #141414;
+	--color-background-contrast-themed: #1e1e1c;
+	--color-background-contrast-themed--hover: #272725;
+	--color-background-contrast-themed--active: #30302E;
 	--color-background-modal: #000000;
 	--color-background-modal--hover: #0A0A0A;
 	--color-background-modal--active: #141414;
@@ -227,7 +230,7 @@
 	--color-background-warning: #483416;
 	--color-background-warning--hover: #4F3C1F;
 	--color-background-warning--active: #574429;
-	--color-background-negative: #FD6571;
+	--color-background-negative: #fd6571;
 	--color-background-negative--hover: #FD6B77;
 	--color-background-negative--active: #FD717C;
 	--color-background-negative-tint: #4b2727;
@@ -278,7 +281,7 @@
 	--color-text-positive: #34c759;
 	--color-text-positive--hover: #3CC960;
 	--color-text-positive--active: #44CB66;
-	--color-text-negative: #FD6571;
+	--color-text-negative: #fd6571;
 	--color-text-negative--hover: #FD6B77;
 	--color-text-negative--active: #FD717C;
 	--color-text-link: #2e90ff;
@@ -344,7 +347,7 @@
 	--color-icon-warning: #ff6900;
 	--color-icon-warning--hover: #FF6F0A;
 	--color-icon-warning--active: #FF7514;
-	--color-icon-negative: #FD6571;
+	--color-icon-negative: #fd6571;
 	--color-icon-negative--hover: #FD6B77;
 	--color-icon-negative--active: #FD717C;
 	--color-stroke-accent: #529ef4;
@@ -371,7 +374,7 @@
 	--color-stroke-positive: #34c759;
 	--color-stroke-positive--hover: #3CC960;
 	--color-stroke-positive--active: #44CB66;
-	--color-stroke-negative: #FD6571;
+	--color-stroke-negative: #fd6571;
 	--color-stroke-negative--hover: #FD6B77;
 	--color-stroke-negative--active: #FD717C;
 	--color-stroke-contrast: #FFFFFF;
@@ -497,13 +500,13 @@
 	--color-tabbar-text-inactive: #76787a;
 	--color-tabbar-text-inactive--hover: #7B7D7F;
 	--color-tabbar-text-inactive--active: #818385;
-	--color-transparent: #00000000;
-	--color-transparent--hover: rgba(0, 0, 0, 0.04);
-	--color-transparent--active: rgba(0, 0, 0, 0.08);
+	--color-transparent: transparent;
+	--color-transparent--hover: rgba(255, 255, 255, 0.04);
+	--color-transparent--active: rgba(255, 255, 255, 0.08);
 	--color-background-inverse: #FFFFFF;
 	--color-background-inverse--hover: #EBEDF0;
 	--color-background-inverse--active: #D7D8DB;
-	--color-stroke-contrast-secondary-alpha: #ffffff1f;
+	--color-stroke-contrast-secondary-alpha: #ffffff1e;
 	--color-stroke-contrast-secondary-alpha--hover: rgba(255, 255, 255, 0.16);
 	--color-stroke-contrast-secondary-alpha--active: rgba(255, 255, 255, 0.2);
 	--vkontakte-color-snippet-border-alpha: rgba(255, 255, 255, 0.15);
@@ -752,6 +755,9 @@
 	--vkontakte-palette-black: #000000;
 	--vkontakte-palette-black--hover: #0A0A0A;
 	--vkontakte-palette-black--active: #141414;
+	--color-text-tertiary-alpha: #ffffff7f;
+	--color-text-tertiary-alpha--hover: rgba(255, 255, 255, 0.54);
+	--color-text-tertiary-alpha--active: rgba(255, 255, 255, 0.58);
 }
 
 %font-display-title1--regular {
@@ -924,6 +930,16 @@
 	line-height: 21px;
 	font-weight: 520;
 }
+%font-text-bold--regular {
+	font-size: 16px;
+	line-height: 18.5px;
+	font-weight: 670;
+}
+%font-footnote-bold--regular {
+	font-size: 13.5px;
+	line-height: 15px;
+	font-weight: 670;
+}
 %font-headline--regular {
 	font-size: 17px;
 	line-height: 20px;

package/themes/legoAndroidDark/index.scss

@@ -5,7 +5,10 @@ $elevation1-invert-y: 0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0, 0
 $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);
+$blur-s: 8px;
 $blur-m: 16px;
+$blur-l: 48px;
+$blur-x-l: 96px;
 $font-family-fallbacks: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 $font-family-accent: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 $font-family-base: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
@@ -202,15 +205,15 @@ $color-background-tertiary-alpha--active: rgba(255, 255, 255, 0.11);
 $color-background-contrast: #FFFFFF;
 $color-background-contrast--hover: #EBEDF0;
 $color-background-contrast--active: #D7D8DB;
-$color-background-contrast-secondary-alpha: rgba(255, 255, 255, 0.2);
+$color-background-contrast-secondary-alpha: #ffffff33;
 $color-background-contrast-secondary-alpha--hover: rgba(255, 255, 255, 0.24);
 $color-background-contrast-secondary-alpha--active: rgba(255, 255, 255, 0.28);
 $color-background-contrast-inverse: #000000;
 $color-background-contrast-inverse--hover: #0A0A0A;
 $color-background-contrast-inverse--active: #141414;
-$color-background-contrast-themed: #000000;
-$color-background-contrast-themed--hover: #0A0A0A;
-$color-background-contrast-themed--active: #141414;
+$color-background-contrast-themed: #1e1e1c;
+$color-background-contrast-themed--hover: #272725;
+$color-background-contrast-themed--active: #30302E;
 $color-background-modal: #000000;
 $color-background-modal--hover: #0A0A0A;
 $color-background-modal--active: #141414;
@@ -226,7 +229,7 @@ $color-background-positive-tint--active: #384736;
 $color-background-warning: #483416;
 $color-background-warning--hover: #4F3C1F;
 $color-background-warning--active: #574429;
-$color-background-negative: #FD6571;
+$color-background-negative: #fd6571;
 $color-background-negative--hover: #FD6B77;
 $color-background-negative--active: #FD717C;
 $color-background-negative-tint: #4b2727;
@@ -277,7 +280,7 @@ $color-text-contrast-themed--active: #4B4B4B;
 $color-text-positive: #34c759;
 $color-text-positive--hover: #3CC960;
 $color-text-positive--active: #44CB66;
-$color-text-negative: #FD6571;
+$color-text-negative: #fd6571;
 $color-text-negative--hover: #FD6B77;
 $color-text-negative--active: #FD717C;
 $color-text-link: #2e90ff;
@@ -343,7 +346,7 @@ $color-icon-positive--active: #44CB66;
 $color-icon-warning: #ff6900;
 $color-icon-warning--hover: #FF6F0A;
 $color-icon-warning--active: #FF7514;
-$color-icon-negative: #FD6571;
+$color-icon-negative: #fd6571;
 $color-icon-negative--hover: #FD6B77;
 $color-icon-negative--active: #FD717C;
 $color-stroke-accent: #529ef4;
@@ -370,7 +373,7 @@ $color-separator-secondary--active: #272728;
 $color-stroke-positive: #34c759;
 $color-stroke-positive--hover: #3CC960;
 $color-stroke-positive--active: #44CB66;
-$color-stroke-negative: #FD6571;
+$color-stroke-negative: #fd6571;
 $color-stroke-negative--hover: #FD6B77;
 $color-stroke-negative--active: #FD717C;
 $color-stroke-contrast: #FFFFFF;
@@ -496,13 +499,13 @@ $color-segmented-control--active: #6F6F70;
 $color-tabbar-text-inactive: #76787a;
 $color-tabbar-text-inactive--hover: #7B7D7F;
 $color-tabbar-text-inactive--active: #818385;
-$color-transparent: #00000000;
-$color-transparent--hover: rgba(0, 0, 0, 0.04);
-$color-transparent--active: rgba(0, 0, 0, 0.08);
+$color-transparent: transparent;
+$color-transparent--hover: rgba(255, 255, 255, 0.04);
+$color-transparent--active: rgba(255, 255, 255, 0.08);
 $color-background-inverse: #FFFFFF;
 $color-background-inverse--hover: #EBEDF0;
 $color-background-inverse--active: #D7D8DB;
-$color-stroke-contrast-secondary-alpha: #ffffff1f;
+$color-stroke-contrast-secondary-alpha: #ffffff1e;
 $color-stroke-contrast-secondary-alpha--hover: rgba(255, 255, 255, 0.16);
 $color-stroke-contrast-secondary-alpha--active: rgba(255, 255, 255, 0.2);
 $vkontakte-color-snippet-border-alpha: rgba(255, 255, 255, 0.15);
@@ -751,6 +754,9 @@ $vkontakte-stories-skeleton-loader-background--active: #C9CCD0;
 $vkontakte-palette-black: #000000;
 $vkontakte-palette-black--hover: #0A0A0A;
 $vkontakte-palette-black--active: #141414;
+$color-text-tertiary-alpha: #ffffff7f;
+$color-text-tertiary-alpha--hover: rgba(255, 255, 255, 0.54);
+$color-text-tertiary-alpha--active: rgba(255, 255, 255, 0.58);
 
 
 @mixin font-display-title1--regular() {
@@ -1136,6 +1142,28 @@ $font-body--regular--map: (
 	'fontWeight': 520,
 	'fontVariationSettings.opticalSize': 22,
 );
+@mixin font-text-bold--regular() {
+	font-size: 16px;
+	line-height: 18.5px;
+	font-weight: 670;
+}
+$font-text-bold--regular--map: (
+	'fontSize': 16px,
+	'lineHeight': 18.5px,
+	'fontWeight': 670,
+	'fontVariationSettings.opticalSize': 21.8,
+);
+@mixin font-footnote-bold--regular() {
+	font-size: 13.5px;
+	line-height: 15px;
+	font-weight: 670;
+}
+$font-footnote-bold--regular--map: (
+	'fontSize': 13.5px,
+	'lineHeight': 15px,
+	'fontWeight': 670,
+	'fontVariationSettings.opticalSize': 20,
+);
 @mixin font-headline--regular() {
 	font-size: 17px;
 	line-height: 20px;

package/themes/legoAndroidDark/index.styl

@@ -5,7 +5,10 @@ $elevation1-invert-y = 0px 0px 2px rgba(0, 0, 0, 0.03), 0px -2px 2px rgba(0, 0,
 $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);
+$blur-s = 8px;
 $blur-m = 16px;
+$blur-l = 48px;
+$blur-x-l = 96px;
 $font-family-fallbacks = -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 $font-family-accent = -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 $font-family-base = -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
@@ -202,15 +205,15 @@ $color-background-tertiary-alpha--active = rgba(255, 255, 255, 0.11);
 $color-background-contrast = #FFFFFF;
 $color-background-contrast--hover = #EBEDF0;
 $color-background-contrast--active = #D7D8DB;
-$color-background-contrast-secondary-alpha = rgba(255, 255, 255, 0.2);
+$color-background-contrast-secondary-alpha = #ffffff33;
 $color-background-contrast-secondary-alpha--hover = rgba(255, 255, 255, 0.24);
 $color-background-contrast-secondary-alpha--active = rgba(255, 255, 255, 0.28);
 $color-background-contrast-inverse = #000000;
 $color-background-contrast-inverse--hover = #0A0A0A;
 $color-background-contrast-inverse--active = #141414;
-$color-background-contrast-themed = #000000;
-$color-background-contrast-themed--hover = #0A0A0A;
-$color-background-contrast-themed--active = #141414;
+$color-background-contrast-themed = #1e1e1c;
+$color-background-contrast-themed--hover = #272725;
+$color-background-contrast-themed--active = #30302E;
 $color-background-modal = #000000;
 $color-background-modal--hover = #0A0A0A;
 $color-background-modal--active = #141414;
@@ -226,7 +229,7 @@ $color-background-positive-tint--active = #384736;
 $color-background-warning = #483416;
 $color-background-warning--hover = #4F3C1F;
 $color-background-warning--active = #574429;
-$color-background-negative = #FD6571;
+$color-background-negative = #fd6571;
 $color-background-negative--hover = #FD6B77;
 $color-background-negative--active = #FD717C;
 $color-background-negative-tint = #4b2727;
@@ -277,7 +280,7 @@ $color-text-contrast-themed--active = #4B4B4B;
 $color-text-positive = #34c759;
 $color-text-positive--hover = #3CC960;
 $color-text-positive--active = #44CB66;
-$color-text-negative = #FD6571;
+$color-text-negative = #fd6571;
 $color-text-negative--hover = #FD6B77;
 $color-text-negative--active = #FD717C;
 $color-text-link = #2e90ff;
@@ -343,7 +346,7 @@ $color-icon-positive--active = #44CB66;
 $color-icon-warning = #ff6900;
 $color-icon-warning--hover = #FF6F0A;
 $color-icon-warning--active = #FF7514;
-$color-icon-negative = #FD6571;
+$color-icon-negative = #fd6571;
 $color-icon-negative--hover = #FD6B77;
 $color-icon-negative--active = #FD717C;
 $color-stroke-accent = #529ef4;
@@ -370,7 +373,7 @@ $color-separator-secondary--active = #272728;
 $color-stroke-positive = #34c759;
 $color-stroke-positive--hover = #3CC960;
 $color-stroke-positive--active = #44CB66;
-$color-stroke-negative = #FD6571;
+$color-stroke-negative = #fd6571;
 $color-stroke-negative--hover = #FD6B77;
 $color-stroke-negative--active = #FD717C;
 $color-stroke-contrast = #FFFFFF;
@@ -496,13 +499,13 @@ $color-segmented-control--active = #6F6F70;
 $color-tabbar-text-inactive = #76787a;
 $color-tabbar-text-inactive--hover = #7B7D7F;
 $color-tabbar-text-inactive--active = #818385;
-$color-transparent = #00000000;
-$color-transparent--hover = rgba(0, 0, 0, 0.04);
-$color-transparent--active = rgba(0, 0, 0, 0.08);
+$color-transparent = transparent;
+$color-transparent--hover = rgba(255, 255, 255, 0.04);
+$color-transparent--active = rgba(255, 255, 255, 0.08);
 $color-background-inverse = #FFFFFF;
 $color-background-inverse--hover = #EBEDF0;
 $color-background-inverse--active = #D7D8DB;
-$color-stroke-contrast-secondary-alpha = #ffffff1f;
+$color-stroke-contrast-secondary-alpha = #ffffff1e;
 $color-stroke-contrast-secondary-alpha--hover = rgba(255, 255, 255, 0.16);
 $color-stroke-contrast-secondary-alpha--active = rgba(255, 255, 255, 0.2);
 $vkontakte-color-snippet-border-alpha = rgba(255, 255, 255, 0.15);
@@ -751,6 +754,9 @@ $vkontakte-stories-skeleton-loader-background--active = #C9CCD0;
 $vkontakte-palette-black = #000000;
 $vkontakte-palette-black--hover = #0A0A0A;
 $vkontakte-palette-black--active = #141414;
+$color-text-tertiary-alpha = #ffffff7f;
+$color-text-tertiary-alpha--hover = rgba(255, 255, 255, 0.54);
+$color-text-tertiary-alpha--active = rgba(255, 255, 255, 0.58);
 
 
 font-display-title1--regular() {
@@ -923,6 +929,16 @@ font-body--regular() {
 	line-height: 21px;
 	font-weight: 520;
 }
+font-text-bold--regular() {
+	font-size: 16px;
+	line-height: 18.5px;
+	font-weight: 670;
+}
+font-footnote-bold--regular() {
+	font-size: 13.5px;
+	line-height: 15px;
+	font-weight: 670;
+}
 font-headline--regular() {
 	font-size: 17px;
 	line-height: 20px;