@vkontakte/vkui-tokens 4.76.1 → 4.77.0

package/build/compilers/styles/helpers/tokenProcessors.d.ts

@@ -17,7 +17,7 @@ export declare const mixinDeclaration: Record<Formats, MixinDeclarationFn>;
 export declare const customMediaDeclaration: Record<Formats, CustomMediaDeclarationFn | null>;
 interface ProcessGroupTokenParams {
     format: Formats;
-    token: Adaptive<Record<string, string | number>> | Record<string, string | number>;
+    token: Adaptive<Record<string, string | number | Record<string, string | number>>> | Record<string, string | number | Record<string, string | number>>;
     key: string;
     prefix: string;
     adaptiveMode?: 'none' | 'onlyAdaptiveGroups' | 'withAdaptiveGroups';

package/build/compilers/styles/helpers/tokenProcessors.js

@@ -1,4 +1,8 @@
-import{_ as n}from"@swc/helpers/_/_define_property";import{_ as t}from"@swc/helpers/_/_object_spread";import{_ as c}from"@swc/helpers/_/_sliced_to_array";import{_ as e}from"@swc/helpers/_/_tagged_template_literal";function o(){var n=e(["\n		@mixin media-",""," {\n			@media "," { @content; }\n		}"]);return o=function(){return n},n}function a(){var n=e(["\n		.media-","","(@content) {\n			@media "," { @content; }\n		}"]);return a=function(){return n},n}function r(){var n=e(["\n		media-","","(content) {\n			@media "," { content }\n		}"]);return r=function(){return n},n}import{stripIndent as i}from"common-tags";import{unCamelcasify as l}from"../../../helpers/unCamelcasify.js";export var EStyleTypes={CSS:"css",SCSS:"scss",PCSS:"pcss",LESS:"less",STYL:"styl"};export var varDeclarations=(n(s={},EStyleTypes.CSS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return"--".concat(t).concat(l(n,"_"))}),n(s,EStyleTypes.PCSS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"_";return"--".concat(t).concat(l(n))}),n(s,EStyleTypes.SCSS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return"$".concat(t).concat(l(n))}),n(s,EStyleTypes.LESS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return"@".concat(t).concat(l(n))}),n(s,EStyleTypes.STYL,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return"$".concat(t).concat(l(n))}),s);export var variablesStatementDeclaration=(n(S={},EStyleTypes.CSS,function(n,t){var c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"	".concat(n).concat(c,": ").concat(t,";\n")}),n(S,EStyleTypes.PCSS,function(n,t){var c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"	".concat(n).concat(c,": ").concat(t,";\n")}),n(S,EStyleTypes.SCSS,function(n,t){var c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"".concat(n).concat(c,": ").concat(t,";\n")}),n(S,EStyleTypes.LESS,function(n,t){var c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"".concat(n).concat(c,": ").concat(t,";\n")}),n(S,EStyleTypes.STYL,function(n,t){var c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"".concat(n).concat(c," = ").concat(t,";\n")}),S);export var mixinDeclaration=(n(v={},EStyleTypes.SCSS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"@mixin ".concat(t).concat(l(n)).concat(c,"()")}),n(v,EStyleTypes.CSS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return".".concat(t).concat(l(n,"_")).concat(c)}),n(v,EStyleTypes.PCSS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"%".concat(t).concat(l(n)).concat(c)}),n(v,EStyleTypes.LESS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return".".concat(t).concat(l(n)).concat(c)}),n(v,EStyleTypes.STYL,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"".concat(t).concat(l(n)).concat(c,"()")}),v);export var customMediaDeclaration=(n(u={},EStyleTypes.CSS,null),n(u,EStyleTypes.PCSS,function(n,t){var c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"@custom-media --".concat(l(n)).concat(c," ").concat(t,";\n")}),n(u,EStyleTypes.SCSS,function(n,t){var c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"".concat(i(o(),l(n),c,t),"\n")}),n(u,EStyleTypes.LESS,function(n,t){var c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"".concat(i(a(),l(n),c,t),"\n")}),n(u,EStyleTypes.STYL,function(n,t){var c=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"".concat(i(r(),l(n),c,t),"\n")}),u);var s,S,v,u,p=function(n,t){var c,e=t;return(null==(c=e.includes)?void 0:c.call(e,","))&&(e='"'.concat(e,'"')),"	'".concat(n,"': ").concat(e,",\n")};// eslint-disable-next-line sonarjs/cognitive-complexity,max-lines-per-function
-export function processGroupToken(n){var e=n.format,o=n.token,a=n.key,r=n.prefix,i=n.adaptiveMode,s=void 0===i?"none":i,S=e===EStyleTypes.CSS,v=e===EStyleTypes.SCSS,u=("withAdaptiveGroups"===s||"onlyAdaptiveGroups"===s)&&e===EStyleTypes.CSS,y=function(n,t,c){var e="	".concat(l(n),": ").concat(t,";\n");return S&&(e+="	".concat(l(n),": var(").concat(c,", ").concat(t,");\n")),e},d="",f="",m="",g=!1,h="";return(// адаптивная группа
-"regular"in o?(Object.keys(o).forEach(function(n){f+="".concat(mixinDeclaration[e](a,r,"--".concat(l(n)))," {\n"),u&&!g&&(m+="".concat(mixinDeclaration[e](a,r)," {\n")),v&&(h+="".concat(varDeclarations.scss(a,r),"--").concat(l(n),"--map: (\n")),Object.entries(t({},o.regular,o[n])).forEach(function(t){var e=c(t,2),i=e[0],s=e[1],E="";if(S){var T=void 0!==o[n][i];E="".concat(varDeclarations.css(a,r),"--").concat(l(i,"_"),"--").concat(T?l(n,"_"):"regular"),T&&(d+=variablesStatementDeclaration.css(E,s))}f+=y(i,s,E),u&&!g&&(m+="	".concat(l(i),": var(").concat(E.replace(new RegExp("--(regular|".concat(n,")$")),""),");\n")),v&&(h+=p(i,s))}),f+="}\n",u&&!g&&(m+="}\n",f+=m,g=!0),v&&(h+=");\n",f+=h)}),"onlyAdaptiveGroups"===s&&(f=m)):(// неадаптивная группа
-f+="".concat(mixinDeclaration[e](a,r)," {\n"),v&&(h+="".concat(varDeclarations.scss(a,r),"--map: (\n")),Object.entries(o).forEach(function(n){var t=c(n,2),e=t[0],o=t[1],i="";S&&(i="".concat(varDeclarations.css(a,r),"--").concat(l(e,"_")),d+=variablesStatementDeclaration.css(i,o)),f+=y(e,o,i),v&&(h+=p(e,o))}),f+="}\n",v&&(h+=");\n",f+=h)),{variables:d,groupTokens:f})}
+import{_ as n}from"@swc/helpers/_/_define_property";import{_ as t}from"@swc/helpers/_/_object_spread";import{_ as e}from"@swc/helpers/_/_sliced_to_array";import{_ as a}from"@swc/helpers/_/_tagged_template_literal";import{_ as c}from"@swc/helpers/_/_type_of";function o(){var n=a(["\n		@mixin media-",""," {\n			@media "," { @content; }\n		}"]);return o=function(){return n},n}function r(){var n=a(["\n		.media-","","(@content) {\n			@media "," { @content; }\n		}"]);return r=function(){return n},n}function i(){var n=a(["\n		media-","","(content) {\n			@media "," { content }\n		}"]);return i=function(){return n},n}import{stripIndent as s}from"common-tags";import{unCamelcasify as l}from"../../../helpers/unCamelcasify.js";export var EStyleTypes={CSS:"css",SCSS:"scss",PCSS:"pcss",LESS:"less",STYL:"styl"};export var varDeclarations=(n(v={},EStyleTypes.CSS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return"--".concat(t).concat(l(n,"_"))}),n(v,EStyleTypes.PCSS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"_";return"--".concat(t).concat(l(n))}),n(v,EStyleTypes.SCSS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return"$".concat(t).concat(l(n))}),n(v,EStyleTypes.LESS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return"@".concat(t).concat(l(n))}),n(v,EStyleTypes.STYL,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return"$".concat(t).concat(l(n))}),v);export var variablesStatementDeclaration=(n(u={},EStyleTypes.CSS,function(n,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"	".concat(n).concat(e,": ").concat(t,";\n")}),n(u,EStyleTypes.PCSS,function(n,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"	".concat(n).concat(e,": ").concat(t,";\n")}),n(u,EStyleTypes.SCSS,function(n,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"".concat(n).concat(e,": ").concat(t,";\n")}),n(u,EStyleTypes.LESS,function(n,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"".concat(n).concat(e,": ").concat(t,";\n")}),n(u,EStyleTypes.STYL,function(n,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"".concat(n).concat(e," = ").concat(t,";\n")}),u);export var mixinDeclaration=(n(S={},EStyleTypes.SCSS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"@mixin ".concat(t).concat(l(n)).concat(e,"()")}),n(S,EStyleTypes.CSS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return".".concat(t).concat(l(n,"_")).concat(e)}),n(S,EStyleTypes.PCSS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"%".concat(t).concat(l(n)).concat(e)}),n(S,EStyleTypes.LESS,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return".".concat(t).concat(l(n)).concat(e)}),n(S,EStyleTypes.STYL,function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"",e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"".concat(t).concat(l(n)).concat(e,"()")}),S);export var customMediaDeclaration=(n(d={},EStyleTypes.CSS,null),n(d,EStyleTypes.PCSS,function(n,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"@custom-media --".concat(l(n)).concat(e," ").concat(t,";\n")}),n(d,EStyleTypes.SCSS,function(n,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"".concat(s(o(),l(n),e,t),"\n")}),n(d,EStyleTypes.LESS,function(n,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"".concat(s(r(),l(n),e,t),"\n")}),n(d,EStyleTypes.STYL,function(n,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return"".concat(s(i(),l(n),e,t),"\n")}),d);var v,u,S,d,p=function(n,t){var e,a=t;return(null==(e=a.includes)?void 0:e.call(a,","))&&(a='"'.concat(a,'"')),"	'".concat(n,"': ").concat(a,",\n")},f=function(n){var t=n.subKey,a=n.subValue,c=n.token,o=n.key,r=n.prefix,i=n.needUpdateVariables,s=n.needMap,v=n.needAddAdaptiveClasses,u=n.addedAdaptiveGroup,S=n.adaptivityState,d=n.onVariables,f=n.onAdaptiveGroup,y=n.onMap;Object.entries(a).forEach(function(n){var a=e(n,2),g=a[0],m=a[1];if(i){var h="".concat(varDeclarations.css(o,r),"--").concat(l(t,"_"),"--").concat(l(g,"_"));if(void 0!==S){var E,_=(null==(E=// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+c[S][t])?void 0:E[g])!==void 0;h+="--".concat(_?l(S,"_"):"regular"),_&&d(variablesStatementDeclaration.css(h,String(m)))}else d(variablesStatementDeclaration.css(h,String(m)))}// fontVariationSettings не добавляем в groupTokens (не выводим CSS-свойство)
+if(v&&!u){var T="".concat(varDeclarations.css(o,r),"--").concat(l(t,"_"),"--").concat(l(g,"_"));f("	".concat(l(t),"--").concat(l(g),": var(").concat(T,");\n"))}s&&y(p("".concat(t,".").concat(g),String(m)))})};// eslint-disable-next-line sonarjs/cognitive-complexity,max-lines-per-function
+export function processGroupToken(n){var a=n.format,o=n.token,r=n.key,i=n.prefix,s=n.adaptiveMode,v=void 0===s?"none":s,u=a===EStyleTypes.CSS,S=a===EStyleTypes.SCSS,d=("withAdaptiveGroups"===v||"onlyAdaptiveGroups"===v)&&a===EStyleTypes.CSS,y=function(n,t,e){var a="	".concat(l(n),": ").concat(t,";\n");return u&&(a+="	".concat(l(n),": var(").concat(e,", ").concat(t,");\n")),a},g="",m="",h="",E=!1,_="";return(// адаптивная группа
+"regular"in o?(Object.keys(o).forEach(function(n){m+="".concat(mixinDeclaration[a](r,i,"--".concat(l(n)))," {\n"),d&&!E&&(h+="".concat(mixinDeclaration[a](r,i)," {\n")),S&&(_+="".concat(varDeclarations.scss(r,i),"--").concat(l(n),"--map: (\n")),Object.entries(t({},o.regular,o[n])).forEach(function(t){var a=e(t,2),s=a[0],v=a[1];// Обработка вложенных объектов (fontVariationSettings)
+if((void 0===v?"undefined":c(v))==="object"&&null!==v)return void f({subKey:s,subValue:v,token:o,key:r,prefix:i,needUpdateVariables:u,needMap:S,needAddAdaptiveClasses:d,addedAdaptiveGroup:E,adaptivityState:n,onVariables:function(n){g+=n},onAdaptiveGroup:function(n){h+=n},onMap:function(n){_+=n}});var T="";if(u){var b=void 0!==o[n][s];T="".concat(varDeclarations.css(r,i),"--").concat(l(s,"_"),"--").concat(b?l(n,"_"):"regular"),b&&(g+=variablesStatementDeclaration.css(T,String(v)))}m+=y(s,String(v),T),d&&!E&&(h+="	".concat(l(s),": var(").concat(T.replace(new RegExp("--(regular|".concat(n,")$")),""),");\n")),S&&(_+=p(s,String(v)))}),m+="}\n",d&&!E&&(h+="}\n",m+=h,E=!0),S&&(_+=");\n",m+=_)}),"onlyAdaptiveGroups"===v&&(m=h)):(// неадаптивная группа
+m+="".concat(mixinDeclaration[a](r,i)," {\n"),S&&(_+="".concat(varDeclarations.scss(r,i),"--map: (\n")),Object.entries(o).forEach(function(n){var t=e(n,2),a=t[0],s=t[1];// Обработка вложенных объектов (fontVariationSettings)
+if((void 0===s?"undefined":c(s))==="object"&&null!==s)return void f({subKey:a,subValue:s,token:o,key:r,prefix:i,needUpdateVariables:u,needMap:S,needAddAdaptiveClasses:d,addedAdaptiveGroup:E,onVariables:function(n){g+=n},onAdaptiveGroup:function(n){h+=n},onMap:function(n){_+=n}});var v="";u&&(v="".concat(varDeclarations.css(r,i),"--").concat(l(a,"_")),g+=variablesStatementDeclaration.css(v,String(s))),m+=y(a,String(s),v),S&&(_+=p(a,String(s)))}),m+="}\n",S&&(_+=");\n",m+=_)),{variables:g,groupTokens:m})}

package/build/themeProcessors/pixelifyValues/pixelifyValues.d.ts

@@ -2,4 +2,4 @@ import type { PixelifyTheme, Theme } from "../../../interfaces/general/index.ts"
 /**
  * Процессор, который превращает численные значения переменных в строковые
  * пример fontSize: 14 -> fontSize: "14px"
- */ export declare function pixelifyValues<T = Theme>(sourceTheme: T): PixelifyTheme<T>;
+ */ export declare function pixelifyValues<T = Theme>(sourceTheme: T, parentKey?: string): PixelifyTheme<T>;

package/build/themeProcessors/pixelifyValues/pixelifyValues.js

@@ -1,4 +1,6 @@
-import{_ as e}from"@swc/helpers/_/_sliced_to_array";import{_ as t}from"@swc/helpers/_/_type_of";var i=/^(breakpoints$|fontWeight|zIndex|opacity|tone)/i;/**
+import{_ as e}from"@swc/helpers/_/_sliced_to_array";import{_ as t}from"@swc/helpers/_/_type_of";var i=/^(breakpoints$|fontWeight|zIndex|opacity|tone)/i,/**
+ * Ключи, внутри которых числовые значения не нужно пикселифицировать
+ */r=new Set(["fontVariationSettings"]);/**
  * Процессор, который превращает численные значения переменных в строковые
  * пример fontSize: 14 -> fontSize: "14px"
- */export function pixelifyValues(r){var o=JSON.parse(JSON.stringify(r));return Object.entries(o).forEach(function(r){var n=e(r,2),p=n[0],a=n[1];i.test(p)||("themeType"===p&&(o[p]="pixelify"),(void 0===a?"undefined":t(a))==="object"&&(o[p]=pixelifyValues(a)),"number"==typeof a&&(o[p]="".concat(a,"px")))}),o}
+ */export function pixelifyValues(n,o){var a=JSON.parse(JSON.stringify(n));return Object.entries(a).forEach(function(n){var s=e(n,2),p=s[0],f=s[1];!i.test(p)&&("themeType"===p&&(a[p]="pixelify"),(void 0===f?"undefined":t(f))==="object"&&(a[p]=pixelifyValues(f,p)),"number"!=typeof f||r.has(null!=o?o:"")||(a[p]="".concat(f,"px")))}),a}

package/interfaces/general/typography/index.d.ts

@@ -10,6 +10,14 @@ export type Font = {
     fontStyle?: Property.FontStyle;
     margin?: string;
     marginBottom?: string | number;
+    fontVariationSettings?: FontVariationSettings;
+};
+/**
+ * Оси вариативных шрифтов
+ */ export type FontVariationSettings = {
+    opticalSize?: string | number;
+    slant?: number;
+    width?: number;
 };
 /**
  * Переменные, отвечающие за группы переменных, отвечающих за шрифты

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.76.1",
+  "version": "4.77.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "type": "module",
   "license": "MIT",

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

@@ -40,22 +40,22 @@
 	--vkui--font_title1--line_height--regular: 31px;
 	--vkui--font_title1--font_family--regular: "VK Sans Display", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_title1--font_weight--regular: 700;
-	--vkui--font_title1--letter_spacing--regular: -0.72px;
+	--vkui--font_title1--letter_spacing--regular: -0.5px;
 	--vkui--font_title2--font_size--regular: 24px;
 	--vkui--font_title2--line_height--regular: 26px;
 	--vkui--font_title2--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
-	--vkui--font_title2--font_weight--regular: 700;
-	--vkui--font_title2--letter_spacing--regular: -0.58px;
-	--vkui--font_title3--font_size--regular: 20px;
+	--vkui--font_title2--font_weight--regular: 670;
+	--vkui--font_title2--font_variation_settings--optical_size--regular: 27.2;
+	--vkui--font_title3--font_size--regular: 21.5px;
 	--vkui--font_title3--line_height--regular: 23px;
 	--vkui--font_title3--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
-	--vkui--font_title3--font_weight--regular: 700;
-	--vkui--font_title3--letter_spacing--regular: -0.78px;
+	--vkui--font_title3--font_weight--regular: 670;
+	--vkui--font_title3--font_variation_settings--optical_size--regular: 23;
 	--vkui--font_headline1--font_size--regular: 17px;
 	--vkui--font_headline1--line_height--regular: 20px;
 	--vkui--font_headline1--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_headline1--font_weight--regular: 600;
-	--vkui--font_headline1--letter_spacing--regular: -0.72px;
+	--vkui--font_headline1--font_variation_settings--optical_size--regular: 24;
 	--vkui--font_headline1--font_size--compact: 15px;
 	--vkui--font_headline1--line_height--compact: 20px;
 	--vkui--font_headline2--font_size--regular: 15px;
@@ -65,17 +65,17 @@
 	--vkui--font_headline2--font_size--compact: 14px;
 	--vkui--font_headline2--line_height--compact: 20px;
 	--vkui--font_text--font_size--regular: 16px;
-	--vkui--font_text--line_height--regular: 18.5px;
+	--vkui--font_text--line_height--regular: 18.33px;
 	--vkui--font_text--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_text--font_weight--regular: 600;
-	--vkui--font_text--letter_spacing--regular: -0.68px;
+	--vkui--font_text--font_variation_settings--optical_size--regular: 24;
 	--vkui--font_text--font_size--compact: 15px;
 	--vkui--font_text--line_height--compact: 20px;
 	--vkui--font_paragraph--font_size--regular: 15px;
-	--vkui--font_paragraph--line_height--regular: 18px;
+	--vkui--font_paragraph--line_height--regular: 18.5px;
 	--vkui--font_paragraph--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
-	--vkui--font_paragraph--font_weight--regular: 600;
-	--vkui--font_paragraph--letter_spacing--regular: -0.46px;
+	--vkui--font_paragraph--font_weight--regular: 580;
+	--vkui--font_paragraph--font_variation_settings--optical_size--regular: 26;
 	--vkui--font_subhead--font_size--regular: 14px;
 	--vkui--font_subhead--line_height--regular: 18px;
 	--vkui--font_subhead--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
@@ -86,7 +86,7 @@
 	--vkui--font_footnote--line_height--regular: 15px;
 	--vkui--font_footnote--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_footnote--font_weight--regular: 600;
-	--vkui--font_footnote--letter_spacing--regular: -0.58px;
+	--vkui--font_footnote--font_variation_settings--optical_size--regular: 20;
 	--vkui--font_footnote_caps--font_size--regular: 13px;
 	--vkui--font_footnote_caps--line_height--regular: 16px;
 	--vkui--font_footnote_caps--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
@@ -227,16 +227,16 @@
 	--vkui--theme_inherits_from: 'vkontakteAndroid';
 	--vkui--font_label1--font_size--regular: 19px;
 	--vkui--font_label1--line_height--regular: 20px;
-	--vkui--font_label1--font_weight--regular: 700;
-	--vkui--font_label1--letter_spacing--regular: -0.58px;
+	--vkui--font_label1--font_weight--regular: 670;
+	--vkui--font_label1--font_variation_settings--optical_size--regular: 24;
 	--vkui--font_label2--font_size--regular: 18px;
 	--vkui--font_label2--line_height--regular: 21px;
 	--vkui--font_label2--font_weight--regular: 600;
-	--vkui--font_label2--letter_spacing--regular: -0.68px;
-	--vkui--font_body--font_size--regular: 17.5px;
-	--vkui--font_body--line_height--regular: 23px;
-	--vkui--font_body--font_weight--regular: 500;
-	--vkui--font_body--letter_spacing--regular: -0.72px;
+	--vkui--font_label2--font_variation_settings--optical_size--regular: 26;
+	--vkui--font_body--font_size--regular: 16.5px;
+	--vkui--font_body--line_height--regular: 21px;
+	--vkui--font_body--font_weight--regular: 520;
+	--vkui--font_body--font_variation_settings--optical_size--regular: 22;
 	--vkui--gradient_black: 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%;
 	--vkui--gradient_white: 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%;
 	--vkui--gradient_tint: rgba(247, 247, 247, 0) 0%, rgba(247, 247, 247, 0.05) 15%, rgba(247, 247, 247, 0.2) 30%, rgba(247, 247, 247, 0.8) 70%, rgba(247, 247, 247, 0.95) 85%, var(--vkui--color_background_tertiary, rgba(247, 247, 247, 1)) 100%;
@@ -245,7 +245,7 @@
 	--vkui--font_headline--line_height--regular: 20px;
 	--vkui--font_headline--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	--vkui--font_headline--font_weight--regular: 600;
-	--vkui--font_headline--letter_spacing--regular: -0.72px;
+	--vkui--font_headline--font_variation_settings--optical_size--regular: 24;
 	--vkui--font_headline--font_size--compact: 15px;
 	--vkui--font_headline--line_height--compact: 20px;
 	--vkui--vkontakte_gradient_aquamarine_blue: rgba(125, 241, 250, 1) 0%, rgba(43, 180, 214, 1) 100%;
@@ -956,8 +956,8 @@
 	font-family: var(--vkui--font_title1--font_family--regular, "VK Sans Display", -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
 	font-weight: 700;
 	font-weight: var(--vkui--font_title1--font_weight--regular, 700);
-	letter-spacing: -0.72px;
-	letter-spacing: var(--vkui--font_title1--letter_spacing--regular, -0.72px);
+	letter-spacing: -0.5px;
+	letter-spacing: var(--vkui--font_title1--letter_spacing--regular, -0.5px);
 }
 .vkui--font_title1 {
 	font-size: var(--vkui--font_title1--font_size);
@@ -973,36 +973,32 @@
 	line-height: var(--vkui--font_title2--line_height--regular, 26px);
 	font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	font-family: var(--vkui--font_title2--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
-	font-weight: 700;
-	font-weight: var(--vkui--font_title2--font_weight--regular, 700);
-	letter-spacing: -0.58px;
-	letter-spacing: var(--vkui--font_title2--letter_spacing--regular, -0.58px);
+	font-weight: 670;
+	font-weight: var(--vkui--font_title2--font_weight--regular, 670);
 }
 .vkui--font_title2 {
 	font-size: var(--vkui--font_title2--font_size);
 	line-height: var(--vkui--font_title2--line_height);
 	font-family: var(--vkui--font_title2--font_family);
 	font-weight: var(--vkui--font_title2--font_weight);
-	letter-spacing: var(--vkui--font_title2--letter_spacing);
+	font-variation-settings--optical-size: var(--vkui--font_title2--font_variation_settings--optical_size);
 }
 .vkui--font_title3--regular {
-	font-size: 20px;
-	font-size: var(--vkui--font_title3--font_size--regular, 20px);
+	font-size: 21.5px;
+	font-size: var(--vkui--font_title3--font_size--regular, 21.5px);
 	line-height: 23px;
 	line-height: var(--vkui--font_title3--line_height--regular, 23px);
 	font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	font-family: var(--vkui--font_title3--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
-	font-weight: 700;
-	font-weight: var(--vkui--font_title3--font_weight--regular, 700);
-	letter-spacing: -0.78px;
-	letter-spacing: var(--vkui--font_title3--letter_spacing--regular, -0.78px);
+	font-weight: 670;
+	font-weight: var(--vkui--font_title3--font_weight--regular, 670);
 }
 .vkui--font_title3 {
 	font-size: var(--vkui--font_title3--font_size);
 	line-height: var(--vkui--font_title3--line_height);
 	font-family: var(--vkui--font_title3--font_family);
 	font-weight: var(--vkui--font_title3--font_weight);
-	letter-spacing: var(--vkui--font_title3--letter_spacing);
+	font-variation-settings--optical-size: var(--vkui--font_title3--font_variation_settings--optical_size);
 }
 .vkui--font_headline1--regular {
 	font-size: 17px;
@@ -1013,15 +1009,13 @@
 	font-family: var(--vkui--font_headline1--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
 	font-weight: 600;
 	font-weight: var(--vkui--font_headline1--font_weight--regular, 600);
-	letter-spacing: -0.72px;
-	letter-spacing: var(--vkui--font_headline1--letter_spacing--regular, -0.72px);
 }
 .vkui--font_headline1 {
 	font-size: var(--vkui--font_headline1--font_size);
 	line-height: var(--vkui--font_headline1--line_height);
 	font-family: var(--vkui--font_headline1--font_family);
 	font-weight: var(--vkui--font_headline1--font_weight);
-	letter-spacing: var(--vkui--font_headline1--letter_spacing);
+	font-variation-settings--optical-size: var(--vkui--font_headline1--font_variation_settings--optical_size);
 }
 .vkui--font_headline1--compact {
 	font-size: 15px;
@@ -1032,8 +1026,6 @@
 	font-family: var(--vkui--font_headline1--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
 	font-weight: 600;
 	font-weight: var(--vkui--font_headline1--font_weight--regular, 600);
-	letter-spacing: -0.72px;
-	letter-spacing: var(--vkui--font_headline1--letter_spacing--regular, -0.72px);
 }
 .vkui--font_headline2--regular {
 	font-size: 15px;
@@ -1064,21 +1056,19 @@
 .vkui--font_text--regular {
 	font-size: 16px;
 	font-size: var(--vkui--font_text--font_size--regular, 16px);
-	line-height: 18.5px;
-	line-height: var(--vkui--font_text--line_height--regular, 18.5px);
+	line-height: 18.33px;
+	line-height: var(--vkui--font_text--line_height--regular, 18.33px);
 	font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	font-family: var(--vkui--font_text--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
 	font-weight: 600;
 	font-weight: var(--vkui--font_text--font_weight--regular, 600);
-	letter-spacing: -0.68px;
-	letter-spacing: var(--vkui--font_text--letter_spacing--regular, -0.68px);
 }
 .vkui--font_text {
 	font-size: var(--vkui--font_text--font_size);
 	line-height: var(--vkui--font_text--line_height);
 	font-family: var(--vkui--font_text--font_family);
 	font-weight: var(--vkui--font_text--font_weight);
-	letter-spacing: var(--vkui--font_text--letter_spacing);
+	font-variation-settings--optical-size: var(--vkui--font_text--font_variation_settings--optical_size);
 }
 .vkui--font_text--compact {
 	font-size: 15px;
@@ -1089,27 +1079,23 @@
 	font-family: var(--vkui--font_text--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
 	font-weight: 600;
 	font-weight: var(--vkui--font_text--font_weight--regular, 600);
-	letter-spacing: -0.68px;
-	letter-spacing: var(--vkui--font_text--letter_spacing--regular, -0.68px);
 }
 .vkui--font_paragraph--regular {
 	font-size: 15px;
 	font-size: var(--vkui--font_paragraph--font_size--regular, 15px);
-	line-height: 18px;
-	line-height: var(--vkui--font_paragraph--line_height--regular, 18px);
+	line-height: 18.5px;
+	line-height: var(--vkui--font_paragraph--line_height--regular, 18.5px);
 	font-family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
 	font-family: var(--vkui--font_paragraph--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
-	font-weight: 600;
-	font-weight: var(--vkui--font_paragraph--font_weight--regular, 600);
-	letter-spacing: -0.46px;
-	letter-spacing: var(--vkui--font_paragraph--letter_spacing--regular, -0.46px);
+	font-weight: 580;
+	font-weight: var(--vkui--font_paragraph--font_weight--regular, 580);
 }
 .vkui--font_paragraph {
 	font-size: var(--vkui--font_paragraph--font_size);
 	line-height: var(--vkui--font_paragraph--line_height);
 	font-family: var(--vkui--font_paragraph--font_family);
 	font-weight: var(--vkui--font_paragraph--font_weight);
-	letter-spacing: var(--vkui--font_paragraph--letter_spacing);
+	font-variation-settings--optical-size: var(--vkui--font_paragraph--font_variation_settings--optical_size);
 }
 .vkui--font_subhead--regular {
 	font-size: 14px;
@@ -1146,15 +1132,13 @@
 	font-family: var(--vkui--font_footnote--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
 	font-weight: 600;
 	font-weight: var(--vkui--font_footnote--font_weight--regular, 600);
-	letter-spacing: -0.58px;
-	letter-spacing: var(--vkui--font_footnote--letter_spacing--regular, -0.58px);
 }
 .vkui--font_footnote {
 	font-size: var(--vkui--font_footnote--font_size);
 	line-height: var(--vkui--font_footnote--line_height);
 	font-family: var(--vkui--font_footnote--font_family);
 	font-weight: var(--vkui--font_footnote--font_weight);
-	letter-spacing: var(--vkui--font_footnote--letter_spacing);
+	font-variation-settings--optical-size: var(--vkui--font_footnote--font_variation_settings--optical_size);
 }
 .vkui--font_footnote_caps--regular {
 	font-size: 13px;
@@ -1285,16 +1269,14 @@
 	font-size: var(--vkui--font_label1--font_size--regular, 19px);
 	line-height: 20px;
 	line-height: var(--vkui--font_label1--line_height--regular, 20px);
-	font-weight: 700;
-	font-weight: var(--vkui--font_label1--font_weight--regular, 700);
-	letter-spacing: -0.58px;
-	letter-spacing: var(--vkui--font_label1--letter_spacing--regular, -0.58px);
+	font-weight: 670;
+	font-weight: var(--vkui--font_label1--font_weight--regular, 670);
 }
 .vkui--font_label1 {
 	font-size: var(--vkui--font_label1--font_size);
 	line-height: var(--vkui--font_label1--line_height);
 	font-weight: var(--vkui--font_label1--font_weight);
-	letter-spacing: var(--vkui--font_label1--letter_spacing);
+	font-variation-settings--optical-size: var(--vkui--font_label1--font_variation_settings--optical_size);
 }
 .vkui--font_label2--regular {
 	font-size: 18px;
@@ -1303,30 +1285,26 @@
 	line-height: var(--vkui--font_label2--line_height--regular, 21px);
 	font-weight: 600;
 	font-weight: var(--vkui--font_label2--font_weight--regular, 600);
-	letter-spacing: -0.68px;
-	letter-spacing: var(--vkui--font_label2--letter_spacing--regular, -0.68px);
 }
 .vkui--font_label2 {
 	font-size: var(--vkui--font_label2--font_size);
 	line-height: var(--vkui--font_label2--line_height);
 	font-weight: var(--vkui--font_label2--font_weight);
-	letter-spacing: var(--vkui--font_label2--letter_spacing);
+	font-variation-settings--optical-size: var(--vkui--font_label2--font_variation_settings--optical_size);
 }
 .vkui--font_body--regular {
-	font-size: 17.5px;
-	font-size: var(--vkui--font_body--font_size--regular, 17.5px);
-	line-height: 23px;
-	line-height: var(--vkui--font_body--line_height--regular, 23px);
-	font-weight: 500;
-	font-weight: var(--vkui--font_body--font_weight--regular, 500);
-	letter-spacing: -0.72px;
-	letter-spacing: var(--vkui--font_body--letter_spacing--regular, -0.72px);
+	font-size: 16.5px;
+	font-size: var(--vkui--font_body--font_size--regular, 16.5px);
+	line-height: 21px;
+	line-height: var(--vkui--font_body--line_height--regular, 21px);
+	font-weight: 520;
+	font-weight: var(--vkui--font_body--font_weight--regular, 520);
 }
 .vkui--font_body {
 	font-size: var(--vkui--font_body--font_size);
 	line-height: var(--vkui--font_body--line_height);
 	font-weight: var(--vkui--font_body--font_weight);
-	letter-spacing: var(--vkui--font_body--letter_spacing);
+	font-variation-settings--optical-size: var(--vkui--font_body--font_variation_settings--optical_size);
 }
 .vkui--font_headline--regular {
 	font-size: 17px;
@@ -1337,15 +1315,13 @@
 	font-family: var(--vkui--font_headline--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
 	font-weight: 600;
 	font-weight: var(--vkui--font_headline--font_weight--regular, 600);
-	letter-spacing: -0.72px;
-	letter-spacing: var(--vkui--font_headline--letter_spacing--regular, -0.72px);
 }
 .vkui--font_headline {
 	font-size: var(--vkui--font_headline--font_size);
 	line-height: var(--vkui--font_headline--line_height);
 	font-family: var(--vkui--font_headline--font_family);
 	font-weight: var(--vkui--font_headline--font_weight);
-	letter-spacing: var(--vkui--font_headline--letter_spacing);
+	font-variation-settings--optical-size: var(--vkui--font_headline--font_variation_settings--optical_size);
 }
 .vkui--font_headline--compact {
 	font-size: 15px;
@@ -1356,7 +1332,5 @@
 	font-family: var(--vkui--font_headline--font_family--regular, -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif);
 	font-weight: 600;
 	font-weight: var(--vkui--font_headline--font_weight--regular, 600);
-	letter-spacing: -0.72px;
-	letter-spacing: var(--vkui--font_headline--letter_spacing--regular, -0.72px);
 }