@vkontakte/vkui-tokens 4.43.0 → 4.43.1

package/build/compilers/docs/compileDocsJSON.js

@@ -15,7 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileDocsJSON = exports.getTypeDocs = void 0;
-var path_1 = __importDefault(require("path"));
+var node_path_1 = __importDefault(require("node:path"));
 var ts_morph_1 = require("ts-morph");
 var capitalize_1 = require("../../helpers/capitalize");
 function getTagDescription(tag) {
@@ -149,7 +149,7 @@ exports.getTypeDocs = getTypeDocs;
  * 	 - export { BaseTheme as MyTheme } from 'path/to/baseTheme.ts'
  */
 function compileDocsJSON(theme) {
-    var themeFilePath = path_1.default.resolve("src/interfaces/themes/".concat(theme.themeName, "/index.ts"));
+    var themeFilePath = node_path_1.default.resolve("src/interfaces/themes/".concat(theme.themeName, "/index.ts"));
     var themeInterfaceName = "Theme".concat((0, capitalize_1.capitalize)(theme.themeName));
     var docs = getTypeDocs(themeFilePath, themeInterfaceName);
     return JSON.stringify(docs, null, '  ');

package/build/compilers/index.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.writeTsFile = exports.writeStyleFiles = exports.writeStructJsonFile = exports.writeJsonFile = exports.writeDocsFiles = exports.writeCssVarsSourceMediaFile = exports.writeCssVarsSourceFile = exports.writeCssVarsJsUtils = void 0;
+var node_path_1 = __importDefault(require("node:path"));
 var fs_extra_1 = __importDefault(require("fs-extra"));
-var path_1 = __importDefault(require("path"));
 var compileGetDeclarationString_1 = require("./cssVars/jsUtils/compileGetDeclarationString");
 var compileDocsJSON_1 = require("./docs/compileDocsJSON");
 var compileJSON_1 = require("./json/compileJSON");
@@ -30,7 +30,7 @@ var cssModes = [
 function writeStructJsonFile(themePath, theme, _) {
     console.log("\u043A\u043E\u043C\u043F\u0438\u043B\u0438\u0440\u0443\u0435\u043C \u0441\u0442\u0440\u0443\u043A\u0442\u0443\u0440\u043D\u044B\u0439 json...");
     var fileName = "struct.json";
-    var filePath = path_1.default.resolve(themePath, fileName);
+    var filePath = node_path_1.default.resolve(themePath, fileName);
     var content = (0, compileStructJSON_1.compileStructJSON)(theme);
     fs_extra_1.default.writeFileSync(filePath, content);
     console.log("\u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0437\u0430\u043F\u0438\u0441\u0430\u043B\u0438 \u0444\u0430\u0439\u043B ".concat(fileName));
@@ -39,7 +39,7 @@ exports.writeStructJsonFile = writeStructJsonFile;
 function writeJsonFile(themePath, theme, _) {
     console.log("\u043A\u043E\u043C\u043F\u0438\u043B\u0438\u0440\u0443\u0435\u043C json...");
     var fileName = "index.json";
-    var filePath = path_1.default.resolve(themePath, fileName);
+    var filePath = node_path_1.default.resolve(themePath, fileName);
     var content = (0, compileJSON_1.compileJSON)(theme);
     fs_extra_1.default.writeFileSync(filePath, content);
     console.log("\u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0437\u0430\u043F\u0438\u0441\u0430\u043B\u0438 \u0444\u0430\u0439\u043B ".concat(fileName));
@@ -49,7 +49,7 @@ exports.writeJsonFile = writeJsonFile;
 function writeTsFile(themePath, theme, type, themeName) {
     console.log("\u043A\u043E\u043C\u043F\u0438\u043B\u0438\u0440\u0443\u0435\u043C ts...");
     var fileName = "index.ts";
-    var filePath = path_1.default.resolve(themePath, fileName);
+    var filePath = node_path_1.default.resolve(themePath, fileName);
     var content = null;
     var sourceContent = (0, compileTypeScript_1.compileTypeScript)(theme);
     switch (type) {
@@ -83,7 +83,7 @@ function writeStyleFiles(themePath, theme) {
     a.forEach(function (format) {
         console.log("\u043A\u043E\u043C\u043F\u0438\u043B\u0438\u0440\u0443\u0435\u043C ".concat(format, "..."));
         var fileName = "index.".concat(format);
-        var filePath = path_1.default.resolve(themePath, fileName);
+        var filePath = node_path_1.default.resolve(themePath, fileName);
         var content = (0, compileStyles_1.compileStyles)(format, theme);
         fs_extra_1.default.writeFileSync(filePath, content);
         console.log("\u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0437\u0430\u043F\u0438\u0441\u0430\u043B\u0438 \u0444\u0430\u0439\u043B ".concat(fileName));
@@ -98,7 +98,7 @@ cssVarsTheme, themeBase) {
     console.log("\u043A\u043E\u043C\u043F\u0438\u043B\u0438\u0440\u0443\u0435\u043C \u0438\u0441\u0442\u043E\u0447\u043D\u0438\u043A\u0438 \u0434\u043B\u044F css vars \u0442\u0435\u043C...");
     for (var _i = 0, cssModes_1 = cssModes; _i < cssModes_1.length; _i++) {
         var modeConfig = cssModes_1[_i];
-        var filePath = path_1.default.resolve(themePath, modeConfig.fileName);
+        var filePath = node_path_1.default.resolve(themePath, modeConfig.fileName);
         var compiledVars = (0, compileStyles_1.compileStyles)('css', theme, modeConfig.mode === 'default' ? 'withAdaptiveGroups' : modeConfig.mode, themeBase);
         var compiledBreakpoints = modeConfig.mode === 'default'
             ? "\n\n".concat((_a = (0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(cssVarsTheme)) !== null && _a !== void 0 ? _a : '')
@@ -116,7 +116,7 @@ exports.writeCssVarsSourceFile = writeCssVarsSourceFile;
 function writeCssVarsSourceMediaFile(themePath, theme) {
     console.log("\u043A\u043E\u043C\u043F\u0438\u043B\u0438\u0440\u0443\u0435\u043C \u043C\u0435\u0434\u0438\u0430 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0435 \u0434\u043B\u044F css vars \u0442\u0435\u043C...");
     var fileName = 'onlyMedia.css';
-    var filePath = path_1.default.resolve(themePath, fileName);
+    var filePath = node_path_1.default.resolve(themePath, fileName);
     var content = (0, compileBreakpointsCssVarsDeclaration_1.compileBreakpointsCssVarsDeclaration)(theme);
     if (content !== null) {
         fs_extra_1.default.writeFileSync(filePath, content);
@@ -131,7 +131,7 @@ function writeCssVarsJsUtils(themePath, theme) {
         { mode: 'onlyColors', fileName: 'onlyColors.ts' },
     ].forEach(function (_a) {
         var mode = _a.mode, fileName = _a.fileName;
-        var filePath = path_1.default.resolve(themePath, fileName);
+        var filePath = node_path_1.default.resolve(themePath, fileName);
         var content = (0, compileGetDeclarationString_1.compileGetDeclarationString)(theme, mode);
         fs_extra_1.default.writeFileSync(filePath, content);
         console.log("\u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0437\u0430\u043F\u0438\u0441\u0430\u043B\u0438 \u0444\u0430\u0439\u043B ".concat(fileName));
@@ -141,7 +141,7 @@ exports.writeCssVarsJsUtils = writeCssVarsJsUtils;
 function writeDocsFiles(themePath, theme) {
     console.log("\u043A\u043E\u043C\u043F\u0438\u043B\u0438\u0440\u0443\u0435\u043C \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430\u0446\u0438\u044E...");
     var fileName = "docs.json";
-    var filePath = path_1.default.resolve(themePath, fileName);
+    var filePath = node_path_1.default.resolve(themePath, fileName);
     var content = (0, compileDocsJSON_1.compileDocsJSON)(theme);
     fs_extra_1.default.writeFileSync(filePath, content);
     console.log("\u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0437\u0430\u043F\u0438\u0441\u0430\u043B\u0438 \u0444\u0430\u0439\u043B ".concat(fileName));

package/build/compilers/styles/compileStyles.js

@@ -6,7 +6,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.compileStyles = exports.getRootSelector = exports.getPrefix = exports.serviceKeys = void 0;
 require("css.escape");
-var assert_1 = require("assert");
+var node_assert_1 = require("node:assert");
 var common_tags_1 = require("common-tags");
 var getAllButColors_1 = require("../../helpers/getAllButColors");
 var getAllButSizes_1 = require("../../helpers/getAllButSizes");
@@ -51,7 +51,7 @@ function getRootSelector(theme, mode) {
 exports.getRootSelector = getRootSelector;
 function isDeepEqual(actual, expected) {
     try {
-        (0, assert_1.deepStrictEqual)(actual, expected);
+        (0, node_assert_1.deepStrictEqual)(actual, expected);
         return true;
     }
     catch (_) {

package/build/themeProcessors/customMedia/customMedia.js

@@ -32,12 +32,13 @@ function processCustomMedia(_a) {
     var usingViewports = (0, exports.getUsingViewports)(breakpoints);
     var result = {};
     usingViewports.forEach(function (viewport, index, array) {
-        var _a;
+        var _a, _b;
         if (viewport !== 'touch') {
             // больше теущего брейкпоинта
-            result[(0, exports.getCustomMediaKey)(viewport, 'from')] = "(min-width: ".concat(breakpoints[viewport].breakpoint, "px)");
+            result[(0, exports.getCustomMediaKey)(viewport, 'from')] =
+                "(min-width: ".concat(breakpoints[viewport].breakpoint, "px)");
             // между текущим и следущим брейкпоинтом
-            result[(0, exports.getCustomMediaKey)(viewport)] = "(min-width: ".concat(breakpoints[viewport].breakpoint, "px) and (max-width: ").concat(((_a = breakpoints[array[index + 1]]) === null || _a === void 0 ? void 0 : _a.breakpoint) - 1, "px)");
+            result[(0, exports.getCustomMediaKey)(viewport)] = "(min-width: ".concat(breakpoints[viewport].breakpoint, "px) and (max-width: ").concat(((_b = (_a = breakpoints[array[index + 1]]) === null || _a === void 0 ? void 0 : _a.breakpoint) !== null && _b !== void 0 ? _b : 0) - 1, "px)");
         }
         if (viewport === 'touch') {
             // меньше следующего

package/build/themeProcessors/extractCssVarsStrict/extractCssVarsStrict.test.js

@@ -39,7 +39,7 @@ var extractCssVarsStrict_1 = require("./extractCssVarsStrict");
                 },
             },
         };
-        var expectedData = __assign({ breakpoints: __assign({}, theme.breakpoints) });
+        var expectedData = { breakpoints: __assign({}, theme.breakpoints) };
         (0, globals_1.expect)((0, extractCssVarsStrict_1.extractCssVarsStrict)(theme)).toStrictEqual(expectedData);
     });
     (0, globals_1.it)('should change type', function () {

package/build/themeProcessors/extractVarsNames/extractVarsNames.test.js

@@ -63,7 +63,7 @@ var extractVarsNames_1 = require("./extractVarsNames");
                     },
                 },
             };
-            var expectedData = __assign({ breakpoints: __assign({}, theme.breakpoints) });
+            var expectedData = { breakpoints: __assign({}, theme.breakpoints) };
             (0, globals_1.expect)((0, extractVarsNames_1.extractVarsNames)(theme)).toStrictEqual(expectedData);
         });
         (0, globals_1.it)('should change type', function () {

package/interfaces/themes/dobro/index.d.ts

@@ -1,38 +1,28 @@
-import type { Theme, ThemeCssVars, ThemeDescription } from '../../general';
-import type { Adaptive } from '../../general/tools';
-import type { Fonts, TypographyBaseProps } from '../../general/typography';
-export interface ThemeDobro extends Theme, ThemeDobroMedia, ThemeDobroCustomTokens, ThemeDobroFonts {
-}
-export interface ThemeDobroDescription extends ThemeDescription, ThemeDobroMedia, ThemeDobroCustomTokens, ThemeDobroFonts {
-}
-export interface ThemeDobroCssVars extends ThemeCssVars<ThemeDobro> {
-}
+import type { Theme, ThemeDescription } from '../../general';
+import type { Breakpoints } from '../../general/tools';
+import type { CustomMediaByViewport } from '../../general/tools/customMedia';
+import type { DefaultViewports, ViewportsTuple } from '../../general/tools/viewports';
+import type { ParadigmThemeCssVars } from '../../namespaces/paradigm';
+type DobroViewportsTuple = ['touch', 'tablet', 'desktopS', 'desktopM'];
 interface ThemeDobroCustomTokens {
     dobroPortalZIndex: number;
     dobroPopoutZIndex: number;
     dobroModalZIndex: number;
     dobroMenuZIndex: number;
 }
-export interface ThemeDobroFonts {
+interface ThemeDobroFonts {
     dobroFontFamily600: string;
     dobroFontFamily500: string;
     dobroFontFamily400: string;
 }
-export interface ThemeDobroMedia {
-    dobroLayoutWidthToMobileS: string;
-    dobroLayoutWidthMobileM: string;
-    dobroLayoutWidthToMobileM: string;
-    dobroLayoutWidthMobileL: string;
-    dobroLayoutWidthToMobile: string;
-    dobroLayoutWidthFromTablet: string;
-    dobroLayoutWidthTablet: string;
-    dobroLayoutWidthToTablet: string;
-    dobroLayoutWidthFromDesktopS: string;
-    dobroLayoutWidthDesktopS: string;
-    dobroLayoutWidthToDesktopS: string;
-    dobroLayoutWidthDesktopM: string;
+interface ThemeDobroStatic<Vt extends ViewportsTuple = DefaultViewports> extends Theme, ThemeDobroCustomTokens, ThemeDobroFonts, Breakpoints<Vt> {
+}
+type ThemeDobroStaticType<Vt extends ViewportsTuple = DefaultViewports> = ThemeDobroStatic<Vt> & CustomMediaByViewport<Vt>;
+interface ThemeDobroDescriptionStatic<Vt extends ViewportsTuple = DefaultViewports> extends ThemeDescription, ThemeDobroCustomTokens, ThemeDobroFonts, Breakpoints<Vt> {
+}
+interface ThemeDobroCssVarsStatic extends ParadigmThemeCssVars<DobroViewportsTuple, ThemeDobro> {
 }
-export type BaseFonts = Omit<{
-    [key in keyof Fonts]: Adaptive<Fonts[key]>;
-}, 'fontHeadline'> & TypographyBaseProps;
+export type ThemeDobro = ThemeDobroStaticType<DobroViewportsTuple>;
+export type ThemeDobroDescription = ThemeDobroDescriptionStatic<DobroViewportsTuple>;
+export type ThemeDobroCssVars = ThemeDobroCssVarsStatic;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.43.0",
+  "version": "4.43.1",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",
@@ -50,11 +50,9 @@
     "@types/fs-extra": "11.0.4",
     "@types/lodash": "4.14.202",
     "@types/node": "18.11.10",
-    "@types/react": "18.2.48",
-    "@types/react-dom": "18.2.18",
-    "@typescript-eslint/eslint-plugin": "6.13.2",
-    "@typescript-eslint/parser": "6.20.0",
-    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.1.7",
+    "@types/react": "18.2.55",
+    "@types/react-dom": "18.2.19",
+    "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.2.0",
     "@vkontakte/icons": "2.95.0",
     "@vkontakte/prettier-config": "0.1.0",
     "@vkontakte/vk-bridge": "2.12.2",
@@ -69,44 +67,47 @@
     "copy-webpack-plugin": "12.0.2",
     "css-loader": "6.8.1",
     "css.escape": "1.5.1",
-    "eslint": "7.32.0",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-config-silence": "1.0.0",
+    "eslint": "8.56.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-alias": "1.1.2",
     "eslint-plugin-compat": "4.2.0",
-    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jasmine": "4.1.3",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-simple-import-sort": "10.0.0",
-    "eslint-plugin-sonarjs": "0.19.0",
+    "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-prettier": "5.1.3",
+    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-simple-import-sort": "12.0.0",
+    "eslint-plugin-sonarjs": "0.24.0",
+    "eslint-plugin-unicorn": "51.0.1",
     "fs-extra": "11.2.0",
     "html-webpack-plugin": "5.6.0",
-    "husky": "8.0.3",
+    "husky": "9.0.11",
     "jest": "29.7.0",
     "jest-junit": "16.0.0",
     "lint-staged": "15.2.0",
     "lodash": "4.17.21",
-    "prettier": "2.8.8",
+    "prettier": "3.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "rimraf": "5.0.5",
     "style-loader": "3.3.3",
-    "terser-webpack-plugin": "5.3.9",
+    "terser-webpack-plugin": "5.3.10",
     "ts-jest": "29.1.2",
     "ts-loader": "9.5.1",
     "ts-morph": "20.0.0",
     "ts-node": "10.9.2",
     "tsconfig-paths": "4.2.0",
     "tscpaths": "0.0.9",
-    "type-fest": "4.10.1",
+    "type-fest": "4.10.2",
     "typescript": "5.2.2",
-    "webpack": "5.89.0",
+    "typescript-eslint": "7.0.1",
+    "webpack": "5.90.1",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
     "webpack-notifier": "1.15.0"
   },
   "engines": {
-    "npm": "^9.3.1",
-    "yarn": "^1.21.1"
+    "npm": ">=9.3.1",
+    "yarn": ">=1.21.1 <2"
   }
 }

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

@@ -216,18 +216,6 @@
 	--vkui--dobro_popout_z_index: 96px;
 	--vkui--dobro_modal_z_index: 97px;
 	--vkui--dobro_menu_z_index: 98px;
-	--vkui--dobro_layout_width_to_mobile_s: (max-width: 499px);
-	--vkui--dobro_layout_width_mobile_m: (min-width: 500px) and (max-width: 637px);
-	--vkui--dobro_layout_width_to_mobile_m: (max-width: 638px);
-	--vkui--dobro_layout_width_mobile_l: (min-width: 639px) and (max-width: 767px);
-	--vkui--dobro_layout_width_to_mobile: (max-width: 767px);
-	--vkui--dobro_layout_width_from_tablet: (min-width: 768px);
-	--vkui--dobro_layout_width_tablet: (min-width: 768px) and (max-width: 1003px);
-	--vkui--dobro_layout_width_to_tablet: (max-width: 1003px);
-	--vkui--dobro_layout_width_from_desktop_s: (min-width: 1004px);
-	--vkui--dobro_layout_width_desktop_s: (min-width: 1004px) and (max-width: 1244px);
-	--vkui--dobro_layout_width_to_desktop_s: (max-width: 1244px);
-	--vkui--dobro_layout_width_desktop_m: (min-width: 1245px);
 	--vkui--font_headline--font_size--regular: 16px;
 	--vkui--font_headline--line_height--regular: 20px;
 	--vkui--font_headline--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
@@ -952,3 +940,281 @@
 	font-weight: var(--vkui--font_headline--font_weight--regular, 500);
 }
 
+:root {
+	--vkui--font_display_title1--font_size: 23px;
+	--vkui--font_display_title1--line_height: 28px;
+	--vkui--font_display_title1--font_family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	--vkui--font_display_title1--font_weight: 600;
+	--vkui--font_display_title2--font_size: var(--vkui--font_display_title2--font_size--regular);
+	--vkui--font_display_title2--line_height: var(--vkui--font_display_title2--line_height--regular);
+	--vkui--font_display_title2--font_family: var(--vkui--font_display_title2--font_family--regular);
+	--vkui--font_display_title2--font_weight: var(--vkui--font_display_title2--font_weight--regular);
+	--vkui--font_display_title3--font_size: 19px;
+	--vkui--font_display_title3--line_height: 24px;
+	--vkui--font_display_title3--font_family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	--vkui--font_display_title3--font_weight: 600;
+	--vkui--font_display_title4--font_size: 17px;
+	--vkui--font_display_title4--line_height: 24px;
+	--vkui--font_display_title4--font_family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	--vkui--font_display_title4--font_weight: 600;
+	--vkui--font_title1--font_size: 24px;
+	--vkui--font_title1--line_height: 28px;
+	--vkui--font_title1--font_family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	--vkui--font_title1--font_weight: 600;
+	--vkui--font_title2--font_size: 20px;
+	--vkui--font_title2--line_height: 24px;
+	--vkui--font_title2--font_family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	--vkui--font_title2--font_weight: 600;
+	--vkui--font_title3--font_size: 17px;
+	--vkui--font_title3--line_height: 22px;
+	--vkui--font_title3--font_family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	--vkui--font_title3--font_weight: 600;
+	--vkui--font_headline1--font_size: var(--vkui--font_headline1--font_size--regular);
+	--vkui--font_headline1--line_height: var(--vkui--font_headline1--line_height--regular);
+	--vkui--font_headline1--font_family: var(--vkui--font_headline1--font_family--regular);
+	--vkui--font_headline1--font_weight: var(--vkui--font_headline1--font_weight--regular);
+	--vkui--font_headline2--font_size: var(--vkui--font_headline2--font_size--regular);
+	--vkui--font_headline2--line_height: var(--vkui--font_headline2--line_height--regular);
+	--vkui--font_headline2--font_family: var(--vkui--font_headline2--font_family--regular);
+	--vkui--font_headline2--font_weight: var(--vkui--font_headline2--font_weight--regular);
+	--vkui--font_text--font_size: var(--vkui--font_text--font_size--regular);
+	--vkui--font_text--line_height: var(--vkui--font_text--line_height--regular);
+	--vkui--font_text--font_family: var(--vkui--font_text--font_family--regular);
+	--vkui--font_text--font_weight: var(--vkui--font_text--font_weight--regular);
+	--vkui--font_paragraph--font_size: 15px;
+	--vkui--font_paragraph--line_height: 20px;
+	--vkui--font_paragraph--font_family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	--vkui--font_paragraph--font_weight: 400;
+	--vkui--font_subhead--font_size: var(--vkui--font_subhead--font_size--regular);
+	--vkui--font_subhead--line_height: var(--vkui--font_subhead--line_height--regular);
+	--vkui--font_subhead--font_family: var(--vkui--font_subhead--font_family--regular);
+	--vkui--font_subhead--font_weight: var(--vkui--font_subhead--font_weight--regular);
+	--vkui--font_footnote--font_size: 13px;
+	--vkui--font_footnote--line_height: 16px;
+	--vkui--font_footnote--font_family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	--vkui--font_footnote--font_weight: 400;
+	--vkui--font_footnote_caps--font_size: 13px;
+	--vkui--font_footnote_caps--line_height: 16px;
+	--vkui--font_footnote_caps--font_family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	--vkui--font_footnote_caps--font_weight: 400;
+	--vkui--font_footnote_caps--text_transform: uppercase;
+	--vkui--font_caption1--font_size: 12px;
+	--vkui--font_caption1--line_height: 14px;
+	--vkui--font_caption1--font_family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	--vkui--font_caption1--font_weight: 400;
+	--vkui--font_caption1_caps--font_size: 12px;
+	--vkui--font_caption1_caps--line_height: 14px;
+	--vkui--font_caption1_caps--font_family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	--vkui--font_caption1_caps--font_weight: 600;
+	--vkui--font_caption1_caps--text_transform: uppercase;
+	--vkui--font_caption2--font_size: 11px;
+	--vkui--font_caption2--line_height: 14px;
+	--vkui--font_caption2--font_family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	--vkui--font_caption2--font_weight: 400;
+	--vkui--font_caption2_caps--font_size: 11px;
+	--vkui--font_caption2_caps--line_height: 14px;
+	--vkui--font_caption2_caps--font_family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	--vkui--font_caption2_caps--font_weight: 600;
+	--vkui--font_caption2_caps--text_transform: uppercase;
+	--vkui--font_caption3--font_size: 9px;
+	--vkui--font_caption3--line_height: 12px;
+	--vkui--font_caption3--font_family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	--vkui--font_caption3--font_weight: 400;
+	--vkui--font_caption3_caps--font_size: 9px;
+	--vkui--font_caption3_caps--line_height: 12px;
+	--vkui--font_caption3_caps--font_family: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;
+	--vkui--font_caption3_caps--font_weight: 600;
+	--vkui--font_caption3_caps--text_transform: uppercase;
+	--vkui--size_select_icon_padding: var(--vkui--size_select_icon_padding--regular);
+	--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);
+	--vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--regular);
+	--vkui--size_label_horizontal_margin: 16px;
+	--vkui--size_border_radius: 8px;
+	--vkui--size_border_radius_rounded: 48px;
+	--vkui--size_check_border_radius: 4px;
+	--vkui--size_border_radius_paper: 12px;
+	--vkui--size_border_radius_promo: 20px;
+	--vkui--size_field_height: var(--vkui--size_field_height--regular);
+	--vkui--size_search_height: var(--vkui--size_search_height--regular);
+	--vkui--size_button_large_height: var(--vkui--size_button_large_height--regular);
+	--vkui--size_button_medium_height: var(--vkui--size_button_medium_height--regular);
+	--vkui--size_button_small_height: var(--vkui--size_button_small_height--regular);
+	--vkui--size_checkbox: 16px;
+	--vkui--size_arrow: 8px;
+	--vkui--size_arrow_promo: 40px;
+	--vkui--size_popup_small: 430px;
+	--vkui--size_popup_medium: 680px;
+	--vkui--size_popup_large: 880px;
+	--vkui--size_field_horizontal_padding: 12px;
+	--vkui--size_button_padding_horizontal: 12px;
+	--vkui--size_arrow_padding: 12px;
+	--vkui--size_tooltip_margin: 8px;
+	--vkui--size_icon_u_i: 16px;
+	--vkui--size_avatar_x_s: 24px;
+	--vkui--size_avatar_s: 32px;
+	--vkui--size_avatar_m: 48px;
+	--vkui--size_avatar_l: 96px;
+	--vkui--size_avatar_x_l: 128px;
+	--vkui--size_badge_x_s: 12px;
+	--vkui--size_badge_s: 16px;
+	--vkui--size_badge_m: 24px;
+	--vkui--size_badge_l: 44px;
+	--vkui--size_badge_x_l: 56px;
+	--vkui--size_cardgrid_padding: 8px;
+	--vkui--size_card_border_radius: 8px;
+	--vkui--size_cardgrid_padding_vertical: 8px;
+	--vkui--size_base_padding_horizontal: 16px;
+	--vkui--size_base_padding_vertical: 12px;
+	--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--size_switch_height: var(--vkui--size_switch_height--regular);
+	--vkui--size_switch_width: var(--vkui--size_switch_width--regular);
+	--vkui--size_switch_pin: var(--vkui--size_switch_pin--regular);
+	--vkui--size_panel_header_height: var(--vkui--size_panel_header_height--regular);
+	--vkui--size_button_base_small_padding_horizontal: 16px;
+	--vkui--size_button_base_medium_padding_horizontal: 16px;
+	--vkui--size_button_base_large_padding_horizontal: 20px;
+	--vkui--size_button_base_small_padding_horizontal_icon: 12px;
+	--vkui--size_button_base_medium_padding_horizontal_icon: 12px;
+	--vkui--size_button_base_large_padding_horizontal_icon: 16px;
+	--vkui--size_button_tertiary_small_padding_horizontal: 12px;
+	--vkui--size_button_tertiary_medium_padding_horizontal: 12px;
+	--vkui--size_button_tertiary_large_padding_horizontal: 16px;
+	--vkui--size_button_tertiary_small_padding_horizontal_icon: 8px;
+	--vkui--size_button_tertiary_medium_padding_horizontal_icon: 8px;
+	--vkui--size_button_tertiary_large_padding_horizontal_icon: 12px;
+	--vkui--size_button_minimum_width: 80px;
+	--vkui--size_form_item_padding_vertical: 12px;
+	--vkui--size_split_col_padding_horizontal: 16px;
+	--vkui--size_subnavigation_bar_gap: 8px;
+	--vkui--size_subnavigation_bar_padding_vertical: 12px;
+	--vkui--size_border1x: 1px;
+	--vkui--size_border2x: 0.5px;
+	--vkui--size_border3x: 0.33px;
+	--vkui--font_headline--font_size: var(--vkui--font_headline--font_size--regular);
+	--vkui--font_headline--line_height: var(--vkui--font_headline--line_height--regular);
+	--vkui--font_headline--font_family: var(--vkui--font_headline--font_family--regular);
+	--vkui--font_headline--font_weight: var(--vkui--font_headline--font_weight--regular);
+}
+
+@media (min-width: 1004px) and (max-width: 1243px) {
+				:root, .vkui--force-auto {
+					--vkui--font_display_title2--font_size: var(--vkui--font_display_title2--font_size--compact);
+--vkui--font_display_title2--line_height: var(--vkui--font_display_title2--line_height--compact);
+--vkui--font_display_title2--font_family: var(--vkui--font_display_title2--font_family--compact);
+--vkui--font_display_title2--font_weight: var(--vkui--font_display_title2--font_weight--compact);
+--vkui--font_headline1--font_size: var(--vkui--font_headline1--font_size--compact);
+--vkui--font_headline1--line_height: var(--vkui--font_headline1--line_height--compact);
+--vkui--font_headline2--font_size: var(--vkui--font_headline2--font_size--compact);
+--vkui--font_headline2--line_height: var(--vkui--font_headline2--line_height--compact);
+--vkui--font_text--font_size: var(--vkui--font_text--font_size--compact);
+--vkui--font_text--line_height: var(--vkui--font_text--line_height--compact);
+--vkui--font_subhead--font_size: var(--vkui--font_subhead--font_size--compact);
+--vkui--font_subhead--line_height: var(--vkui--font_subhead--line_height--compact);
+--vkui--size_select_icon_padding: var(--vkui--size_select_icon_padding--compact);
+--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--compact);
+--vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--compact);
+--vkui--size_field_height: var(--vkui--size_field_height--compact);
+--vkui--size_search_height: var(--vkui--size_search_height--compact);
+--vkui--size_button_large_height: var(--vkui--size_button_large_height--compact);
+--vkui--size_button_medium_height: var(--vkui--size_button_medium_height--compact);
+--vkui--size_button_small_height: var(--vkui--size_button_small_height--compact);
+--vkui--size_switch_height: var(--vkui--size_switch_height--compact);
+--vkui--size_switch_width: var(--vkui--size_switch_width--compact);
+--vkui--size_switch_pin: var(--vkui--size_switch_pin--compact);
+--vkui--size_panel_header_height: var(--vkui--size_panel_header_height--compact);
+--vkui--font_headline--font_size: var(--vkui--font_headline--font_size--compact);
+--vkui--font_headline--line_height: var(--vkui--font_headline--line_height--compact);
+				}
+			}
+
+			.vkui--force-desktop_s {
+				--vkui--font_display_title2--font_size: var(--vkui--font_display_title2--font_size--compact);
+--vkui--font_display_title2--line_height: var(--vkui--font_display_title2--line_height--compact);
+--vkui--font_display_title2--font_family: var(--vkui--font_display_title2--font_family--compact);
+--vkui--font_display_title2--font_weight: var(--vkui--font_display_title2--font_weight--compact);
+--vkui--font_headline1--font_size: var(--vkui--font_headline1--font_size--compact);
+--vkui--font_headline1--line_height: var(--vkui--font_headline1--line_height--compact);
+--vkui--font_headline2--font_size: var(--vkui--font_headline2--font_size--compact);
+--vkui--font_headline2--line_height: var(--vkui--font_headline2--line_height--compact);
+--vkui--font_text--font_size: var(--vkui--font_text--font_size--compact);
+--vkui--font_text--line_height: var(--vkui--font_text--line_height--compact);
+--vkui--font_subhead--font_size: var(--vkui--font_subhead--font_size--compact);
+--vkui--font_subhead--line_height: var(--vkui--font_subhead--line_height--compact);
+--vkui--size_select_icon_padding: var(--vkui--size_select_icon_padding--compact);
+--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--compact);
+--vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--compact);
+--vkui--size_field_height: var(--vkui--size_field_height--compact);
+--vkui--size_search_height: var(--vkui--size_search_height--compact);
+--vkui--size_button_large_height: var(--vkui--size_button_large_height--compact);
+--vkui--size_button_medium_height: var(--vkui--size_button_medium_height--compact);
+--vkui--size_button_small_height: var(--vkui--size_button_small_height--compact);
+--vkui--size_switch_height: var(--vkui--size_switch_height--compact);
+--vkui--size_switch_width: var(--vkui--size_switch_width--compact);
+--vkui--size_switch_pin: var(--vkui--size_switch_pin--compact);
+--vkui--size_panel_header_height: var(--vkui--size_panel_header_height--compact);
+--vkui--font_headline--font_size: var(--vkui--font_headline--font_size--compact);
+--vkui--font_headline--line_height: var(--vkui--font_headline--line_height--compact);
+			}
+
+@media (max-width: 767px) {
+				:root, .vkui--force-auto {
+					--vkui--font_display_title2--font_size: var(--vkui--font_display_title2--font_size--regular);
+--vkui--font_display_title2--line_height: var(--vkui--font_display_title2--line_height--regular);
+--vkui--font_display_title2--font_family: var(--vkui--font_display_title2--font_family--regular);
+--vkui--font_display_title2--font_weight: var(--vkui--font_display_title2--font_weight--regular);
+--vkui--font_headline1--font_size: var(--vkui--font_headline1--font_size--regular);
+--vkui--font_headline1--line_height: var(--vkui--font_headline1--line_height--regular);
+--vkui--font_headline2--font_size: var(--vkui--font_headline2--font_size--regular);
+--vkui--font_headline2--line_height: var(--vkui--font_headline2--line_height--regular);
+--vkui--font_text--font_size: var(--vkui--font_text--font_size--regular);
+--vkui--font_text--line_height: var(--vkui--font_text--line_height--regular);
+--vkui--font_subhead--font_size: var(--vkui--font_subhead--font_size--regular);
+--vkui--font_subhead--line_height: var(--vkui--font_subhead--line_height--regular);
+--vkui--size_select_icon_padding: var(--vkui--size_select_icon_padding--regular);
+--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);
+--vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--regular);
+--vkui--size_field_height: var(--vkui--size_field_height--regular);
+--vkui--size_search_height: var(--vkui--size_search_height--regular);
+--vkui--size_button_large_height: var(--vkui--size_button_large_height--regular);
+--vkui--size_button_medium_height: var(--vkui--size_button_medium_height--regular);
+--vkui--size_button_small_height: var(--vkui--size_button_small_height--regular);
+--vkui--size_switch_height: var(--vkui--size_switch_height--regular);
+--vkui--size_switch_width: var(--vkui--size_switch_width--regular);
+--vkui--size_switch_pin: var(--vkui--size_switch_pin--regular);
+--vkui--size_panel_header_height: var(--vkui--size_panel_header_height--regular);
+--vkui--font_headline--font_size: var(--vkui--font_headline--font_size--regular);
+--vkui--font_headline--line_height: var(--vkui--font_headline--line_height--regular);
+				}
+			}
+
+			.vkui--force-touch {
+				--vkui--font_display_title2--font_size: var(--vkui--font_display_title2--font_size--regular);
+--vkui--font_display_title2--line_height: var(--vkui--font_display_title2--line_height--regular);
+--vkui--font_display_title2--font_family: var(--vkui--font_display_title2--font_family--regular);
+--vkui--font_display_title2--font_weight: var(--vkui--font_display_title2--font_weight--regular);
+--vkui--font_headline1--font_size: var(--vkui--font_headline1--font_size--regular);
+--vkui--font_headline1--line_height: var(--vkui--font_headline1--line_height--regular);
+--vkui--font_headline2--font_size: var(--vkui--font_headline2--font_size--regular);
+--vkui--font_headline2--line_height: var(--vkui--font_headline2--line_height--regular);
+--vkui--font_text--font_size: var(--vkui--font_text--font_size--regular);
+--vkui--font_text--line_height: var(--vkui--font_text--line_height--regular);
+--vkui--font_subhead--font_size: var(--vkui--font_subhead--font_size--regular);
+--vkui--font_subhead--line_height: var(--vkui--font_subhead--line_height--regular);
+--vkui--size_select_icon_padding: var(--vkui--size_select_icon_padding--regular);
+--vkui--size_popup_base_padding: var(--vkui--size_popup_base_padding--regular);
+--vkui--size_popup_header_padding: var(--vkui--size_popup_header_padding--regular);
+--vkui--size_field_height: var(--vkui--size_field_height--regular);
+--vkui--size_search_height: var(--vkui--size_search_height--regular);
+--vkui--size_button_large_height: var(--vkui--size_button_large_height--regular);
+--vkui--size_button_medium_height: var(--vkui--size_button_medium_height--regular);
+--vkui--size_button_small_height: var(--vkui--size_button_small_height--regular);
+--vkui--size_switch_height: var(--vkui--size_switch_height--regular);
+--vkui--size_switch_width: var(--vkui--size_switch_width--regular);
+--vkui--size_switch_pin: var(--vkui--size_switch_pin--regular);
+--vkui--size_panel_header_height: var(--vkui--size_panel_header_height--regular);
+--vkui--font_headline--font_size: var(--vkui--font_headline--font_size--regular);
+--vkui--font_headline--line_height: var(--vkui--font_headline--line_height--regular);
+			}

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

@@ -216,18 +216,6 @@
 	--vkui--dobro_popout_z_index: 96px;
 	--vkui--dobro_modal_z_index: 97px;
 	--vkui--dobro_menu_z_index: 98px;
-	--vkui--dobro_layout_width_to_mobile_s: (max-width: 499px);
-	--vkui--dobro_layout_width_mobile_m: (min-width: 500px) and (max-width: 637px);
-	--vkui--dobro_layout_width_to_mobile_m: (max-width: 638px);
-	--vkui--dobro_layout_width_mobile_l: (min-width: 639px) and (max-width: 767px);
-	--vkui--dobro_layout_width_to_mobile: (max-width: 767px);
-	--vkui--dobro_layout_width_from_tablet: (min-width: 768px);
-	--vkui--dobro_layout_width_tablet: (min-width: 768px) and (max-width: 1003px);
-	--vkui--dobro_layout_width_to_tablet: (max-width: 1003px);
-	--vkui--dobro_layout_width_from_desktop_s: (min-width: 1004px);
-	--vkui--dobro_layout_width_desktop_s: (min-width: 1004px) and (max-width: 1244px);
-	--vkui--dobro_layout_width_to_desktop_s: (max-width: 1244px);
-	--vkui--dobro_layout_width_desktop_m: (min-width: 1245px);
 	--vkui--font_headline--font_size--regular: 16px;
 	--vkui--font_headline--line_height--regular: 20px;
 	--vkui--font_headline--font_family--regular: -apple-system, system-ui, "Helvetica Neue", Roboto, sans-serif;

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

@@ -28,18 +28,6 @@
 	--vkui--dobro_popout_z_index: 96px;
 	--vkui--dobro_modal_z_index: 97px;
 	--vkui--dobro_menu_z_index: 98px;
-	--vkui--dobro_layout_width_to_mobile_s: (max-width: 499px);
-	--vkui--dobro_layout_width_mobile_m: (min-width: 500px) and (max-width: 637px);
-	--vkui--dobro_layout_width_to_mobile_m: (max-width: 638px);
-	--vkui--dobro_layout_width_mobile_l: (min-width: 639px) and (max-width: 767px);
-	--vkui--dobro_layout_width_to_mobile: (max-width: 767px);
-	--vkui--dobro_layout_width_from_tablet: (min-width: 768px);
-	--vkui--dobro_layout_width_tablet: (min-width: 768px) and (max-width: 1003px);
-	--vkui--dobro_layout_width_to_tablet: (max-width: 1003px);
-	--vkui--dobro_layout_width_from_desktop_s: (min-width: 1004px);
-	--vkui--dobro_layout_width_desktop_s: (min-width: 1004px) and (max-width: 1244px);
-	--vkui--dobro_layout_width_to_desktop_s: (max-width: 1244px);
-	--vkui--dobro_layout_width_desktop_m: (min-width: 1245px);
 	--vkui--colors_scheme: light;
 	--vkui--color_background_accent: #2688eb;
 	--vkui--color_background_accent--hover: #2483E4;