@vkontakte/vkui-tokens 4.37.0 → 4.38.1

package/README.md

@@ -56,7 +56,7 @@ npm i --save @vkontakte/vkui-tokens@latest
 #### Использование в CSS
 
 ```postcss
-.myAwesomeClass:hover {
+.class:hover {
 	background-color: var(--vkui--color_background--hover);
 }
 ```
@@ -217,6 +217,7 @@ const { theme, pixelifyTheme, cssVarsTheme } = expandAll(myNewAwesomeTheme);
 // которую можно вставить в DOM или сохранить в файл
 const cssString = compileStyles('css', pixelifyTheme);
 ```
+
 # Roadmap
 
 - [ ] Добавить более умную генерацию active, hover состояний цвета.

package/build/compilers/cssVars/helpers/getVarString.d.ts

@@ -5,5 +5,5 @@ interface GetVarStringParams {
     delimeter?: string;
     callback?: (name: string, value: string | number) => void;
 }
-export declare const getVarString: ({ valuesObject, prefix, delimeter, callback, }: GetVarStringParams) => string;
+export declare const getVarString: ({ valuesObject, prefix, delimeter, callback: callbackFn, }: GetVarStringParams) => string;
 export {};

package/build/compilers/cssVars/helpers/getVarString.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getVarString = void 0;
 var getVarString = function (_a) {
-    var valuesObject = _a.valuesObject, prefix = _a.prefix, _b = _a.delimeter, delimeter = _b === void 0 ? '\n' : _b, callback = _a.callback;
+    var valuesObject = _a.valuesObject, prefix = _a.prefix, _b = _a.delimeter, delimeter = _b === void 0 ? '\n' : _b, callbackFn = _a.callback;
     return Object.entries(valuesObject)
         .map(function (_a) {
         var name = _a[0], value = _a[1];
-        callback === null || callback === void 0 ? void 0 : callback(name, value);
+        callbackFn === null || callbackFn === void 0 ? void 0 : callbackFn(name, value);
         return "".concat(prefix).concat(name, ": ").concat(value, ";");
     })
         .join(delimeter);

package/build/compilers/index.js

@@ -45,6 +45,7 @@ function writeJsonFile(themePath, theme, _) {
     console.log("\u0443\u0441\u043F\u0435\u0448\u043D\u043E \u0437\u0430\u043F\u0438\u0441\u0430\u043B\u0438 \u0444\u0430\u0439\u043B ".concat(fileName));
 }
 exports.writeJsonFile = writeJsonFile;
+// eslint-disable-next-line max-params
 function writeTsFile(themePath, theme, type, themeName) {
     console.log("\u043A\u043E\u043C\u043F\u0438\u043B\u0438\u0440\u0443\u0435\u043C ts...");
     var fileName = "index.ts";
@@ -89,7 +90,10 @@ function writeStyleFiles(themePath, theme) {
     });
 }
 exports.writeStyleFiles = writeStyleFiles;
-function writeCssVarsSourceFile(themePath, theme, cssVarsTheme, themeBase) {
+// eslint-disable-next-line max-params
+function writeCssVarsSourceFile(themePath, theme, 
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+cssVarsTheme, themeBase) {
     var _a;
     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++) {

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

@@ -2,8 +2,8 @@ import { ColorWithStates } from '../../../../interfaces/general/colors';
 import { Adaptive } from '../../../../interfaces/general/tools';
 import { CustomMediaByViewportUnion } from '../../../../interfaces/general/tools/customMedia';
 import { ViewportsTuple } from '../../../../interfaces/general/tools/viewports';
-export declare function isString(token: any, key: string): token is string;
-export declare function isColor(token: any): token is ColorWithStates;
-export declare function isGroupToken(token: any): token is Record<string, any>;
-export declare function isAdaptiveFlatToken(token: any): token is Adaptive<any>;
-export declare function isCustomMediaToken(key: any): key is CustomMediaByViewportUnion<ViewportsTuple>;
+export declare function isString(token: unknown, key: string): token is string;
+export declare function isColor(token: unknown): token is ColorWithStates;
+export declare function isGroupToken(token: unknown): token is Record<string, any>;
+export declare function isAdaptiveFlatToken(token: unknown): token is Adaptive<any>;
+export declare function isCustomMediaToken(key: unknown): key is CustomMediaByViewportUnion<ViewportsTuple>;

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

@@ -28,7 +28,8 @@ function isAdaptiveFlatToken(token) {
     if (typeof token !== 'object') {
         return false;
     }
-    return token.regular !== undefined && typeof token.regular !== 'object';
+    return (token.regular !== undefined &&
+        typeof token.regular !== 'object');
 }
 exports.isAdaptiveFlatToken = isAdaptiveFlatToken;
 var allCustomMediaKeys = Object.keys((0, customMedia_1.processCustomMedia)({

package/build/helpers/getGradientPointsFromColor.d.ts

@@ -1,3 +1,3 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 import { GradientPoints } from '../../interfaces/general/gradients';
 export declare function getGradientPointsFromColor(colorArg: Property.Color, opacityMultiplier?: number): GradientPoints;

package/build/themeProcessors/expandColors/mixColors.d.ts

@@ -1,2 +1,2 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 export declare const mixColors: (colorArg: Property.Color, colorState: Property.Color, opacity: number) => Property.Color;

package/build/themeProcessors/pixelifyValues/pixelifyValues.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.pixelifyValues = void 0;
-var numericCSSProperties = /^(breakpoints$|fontWeight|zIndex)/i;
+var numericCSSProperties = /^(breakpoints$|fontWeight|zIndex|opacity|tone)/i;
 /**
  * Процессор, который превращает численные значения переменных в строковые
  * пример fontSize: 14 -> fontSize: "14px"
@@ -19,7 +19,7 @@ function pixelifyValues(sourceTheme) {
         if (typeof value === 'object') {
             theme[key] = pixelifyValues(value);
         }
-        if (Number.isInteger(value)) {
+        if (typeof value === 'number') {
             theme[key] = "".concat(value, "px");
         }
     });

package/build/themeProcessors/pixelifyValues/pixelifyValues.test.js

@@ -39,6 +39,19 @@ var pixelifyValues_1 = require("./pixelifyValues");
             };
             (0, globals_1.expect)((0, pixelifyValues_1.pixelifyValues)(theme)).toStrictEqual(pixelifyTheme);
         });
+        (0, globals_1.it)('should pixelify float numbers', function () {
+            var theme = {
+                x1: 1,
+                x2: 0.5,
+                x3: 0.33,
+            };
+            var pixelifyTheme = {
+                x1: '1px',
+                x2: '0.5px',
+                x3: '0.33px',
+            };
+            (0, globals_1.expect)((0, pixelifyValues_1.pixelifyValues)(theme)).toStrictEqual(pixelifyTheme);
+        });
         (0, globals_1.it)('should correctly pixelify fonts (exclude weight)', function () {
             var theme = {
                 fontH1: {
@@ -83,5 +96,21 @@ var pixelifyValues_1 = require("./pixelifyValues");
                 fontWeightAccent1: 700,
             });
         });
+        (0, globals_1.it)('should correctly pixelify zIndex', function () {
+            (0, globals_1.expect)((0, pixelifyValues_1.pixelifyValues)({ zIndexModal: 100 })).toEqual({
+                zIndexModal: 100,
+            });
+        });
+        (0, globals_1.it)('should correctly pixelify opacity', function () {
+            (0, globals_1.expect)((0, pixelifyValues_1.pixelifyValues)({ opacityDisable: 1, opacityDisableAccessibility: 0.5 })).toEqual({
+                opacityDisable: 1,
+                opacityDisableAccessibility: 0.5,
+            });
+        });
+        (0, globals_1.it)('should correctly pixelify tone', function () {
+            (0, globals_1.expect)((0, pixelifyValues_1.pixelifyValues)({ toneValueActive: 0.1 })).toEqual({
+                toneValueActive: 0.1,
+            });
+        });
     });
 });

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

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 /**
  * Переменные отвечающие за параметры анимаций
  */

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

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 import { ColorsDescription, ColorsScheme } from '..';
 /**
  * Интерфейс всех цветов на выходе
@@ -86,6 +86,11 @@ export interface ColorsDescriptionStruct {
      * @tags color, background
      */
     colorBackgroundContrastInverse: ColorDescription;
+    /**
+     * @desc Контрастный фон, перекрашивается в серый на тёмной теме
+     * @tags color, background
+     */
+    colorBackgroundContrastThemed: ColorDescription;
     /**
      * @desc Фон для всплывающих окон
      * @tags color, background
@@ -216,11 +221,6 @@ export interface ColorsDescriptionStruct {
      * @tags color
      */
     colorLinkContrast: ColorDescription;
-    /**
-     * @desc Цвет текста для кнопок
-     * @tags color
-     */
-    colorTextButton: ColorDescription;
     /**
      * @desc Акцентный цвет иконок
      * @tags color, icon
@@ -296,11 +296,6 @@ export interface ColorsDescriptionStruct {
      * @tags color, icon
      */
     colorIconNegative: ColorDescription;
-    /**
-     * @desc Цвет иконок для кнопок
-     * @tags color, icon
-     */
-    colorIconButton: ColorDescription;
     /**
      * @desc Цвет акцентной обводки
      * @tags color,stroke
@@ -361,11 +356,6 @@ export interface ColorsDescriptionStruct {
      * @tags color, stroke
      */
     colorSeparatorPrimary3x: ColorDescription;
-    /**
-     * @desc Цвет обводки для кнопок
-     * @tags color, stroke
-     */
-    colorStrokeButton: ColorDescription;
     /**
      * @desc Палитра цветов. Голубой цвет
      * @tags color, palette
@@ -391,6 +381,11 @@ export interface ColorsDescriptionStruct {
      * @tags color, palette
      */
     colorAccentOrange: ColorDescription;
+    /**
+     * @desc Палитра цветов. Нежно оранжевый цвет
+     * @tags color, palette
+     */
+    colorAccentOrangePeach: ColorDescription;
     /**
      * @desc Палитра цветов. Огненно оранжевый цвет
      * @tags color, palette
@@ -516,6 +511,21 @@ export interface ColorsDescriptionStruct {
      * @tags color, component, background
      */
     colorTabbarTextInactive: ColorDescription;
+    /**
+     * @desc Цвет текста для кнопок
+     * @tags color
+     */
+    colorButtonText: ColorDescription;
+    /**
+     * @desc Цвет иконок для кнопок
+     * @tags color, icon
+     */
+    colorButtonIcon: ColorDescription;
+    /**
+     * @desc Цвет обводки для кнопок
+     * @tags color, stroke
+     */
+    colorButtonStroke: ColorDescription;
 }
 export type Colors = {
     [key in keyof ColorsDescriptionStruct]: ColorWithStates;

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

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 export interface Elevation {
     /**
      * @desc Параметры тени уровень 4

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

@@ -351,6 +351,21 @@ export interface Sizes {
      * @tags size, component
      */
     sizeSubnavigationBarPaddingVertical: number;
+    /**
+     * @desc Размер границ для экранов с разрешением 1х
+     * @tags size, component
+     */
+    sizeBorder1x: number;
+    /**
+     * @desc Размер границ для экранов с разрешением 3х
+     * @tags size, component
+     */
+    sizeBorder2x: number;
+    /**
+     * @desc Размер границ для экранов с разрешением 3х
+     * @tags size, component
+     */
+    sizeBorder3x: number;
 }
 export interface SpacingSizes {
     /**

package/interfaces/general/index.d.ts

@@ -1,4 +1,5 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
+import { StaticTokens, Tokens } from './tools/tokenValue';
 import { Animations } from './animations';
 import { ColorDescription, Colors, ColorsDescriptionStruct } from './colors';
 import { Elevation } from './elevation';
@@ -10,8 +11,6 @@ import { NamifyObject } from './tools/cssVars';
 import { StringifyObject } from './tools/utils';
 import { Fonts, TypographyBaseProps } from './typography';
 import { ZIndex } from './zIndex';
-import ColorScheme = Property.ColorScheme;
-import { StaticTokens, Tokens } from './tools/tokenValue';
 interface AdaptiveInterfaceValues extends Sizes, Fonts {
 }
 type AdaptiveTokens = {
@@ -83,7 +82,7 @@ export interface Theme extends ThemeGeneral, ColorsFinal {
 export type PixelifyTheme<T extends Partial<Record<keyof T, any>> = StaticTokens<Theme>> = StringifyObject<Omit<T, 'breakpoints' | 'themeType'>> & Pick<T, Extract<'breakpoints', keyof T>> & {
     themeType: 'pixelify';
     themeName: string;
-    colorScheme: ColorScheme;
+    colorScheme: Property.ColorScheme;
 };
 /**
  * Тема, которая каждой переменной даёт name и value в виде названия

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

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 type TLength = string | 0;
 export type Font = {
     fontSize: number;

package/interfaces/namespaces/paradigm/index.d.ts

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 import { Theme, ThemeCssVars, ThemeCssVarsWide, ThemeDescription } from '../../general';
 import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
 import { Adaptive, Breakpoints } from '../../general/tools';

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

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 import { ThemeCssVars } from '../../general';
 import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
 import { Adaptive } from '../../general/tools';

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

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 import { ColorDescription, ColorWithStates } from '../../general/colors';
 import { Adaptive } from '../../general/tools';
 import { Font } from '../../general/typography';

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

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 import { ColorWithStates } from '../../general/colors';
 import { ParadigmThemeCssVars } from '../../namespaces/paradigm';
 import { MediaViewportsTuple, ThemeMedia, ThemeMediaDescription } from '../media';

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

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 import { ThemeCssVars } from '../../general';
 import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
 import { Adaptive } from '../../general/tools';

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

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 import { ColorDescription, ColorWithStates } from '../../general/colors';
 import { GradientPoints } from '../../general/gradients';
 import { DefaultViewports } from '../../general/tools/viewports';

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

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 import { Adaptive } from '../../general/tools';
 import { ViewportsOrdered } from '../../general/tools/viewports';
 import { ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';

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

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 import { ColorsDescription, ThemeCssVars, ThemeDescription } from '../../general';
 import { ColorDescription, ColorWithStates } from '../../general/colors';
 import { GradientPoints } from '../../general/gradients';

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

@@ -1,4 +1,4 @@
-import { Property } from 'csstype';
+import type { Property } from 'csstype';
 import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
 import { Adaptive } from '../../general/tools';
 import { Font } from '../../general/typography';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.37.0",
+  "version": "4.38.1",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -25,7 +25,17 @@
     "styleguide": "sh ./tasks/styleguide.sh",
     "docs:dev": "cd docs/webpack && webpack-dev-server --config webpack.client.js --mode development",
     "docs:build": "cd docs/webpack && webpack --config webpack.client.js --mode production",
-    "docs:prepare-data": "ts-node tasks/docs/prepareTokensData.ts"
+    "docs:prepare-data": "ts-node tasks/docs/prepareTokensData.ts",
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{ts,tsx,js,jsx}": [
+      "prettier --write",
+      "eslint"
+    ],
+    "*.{json,md}": [
+      "prettier --write"
+    ]
   },
   "repository": "https://github.com/VKCOM/vkui-tokens.git",
   "dependencies": {
@@ -38,8 +48,8 @@
     "@types/common-tags": "1.8.1",
     "@types/fs-extra": "11.0.1",
     "@types/node": "18.11.10",
-    "@types/react-dom": "18.2.1",
     "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.1",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.1.4",
@@ -69,8 +79,10 @@
     "eslint-plugin-sonarjs": "0.19.0",
     "fs-extra": "11.1.1",
     "html-webpack-plugin": "5.5.1",
+    "husky": "8.0.3",
     "jest": "29.5.0",
     "jest-junit": "16.0.0",
+    "lint-staged": "14.0.1",
     "lodash": "4.17.21",
     "prettier": "2.8.8",
     "react": "18.2.0",
@@ -79,14 +91,14 @@
     "style-loader": "3.3.3",
     "terser-webpack-plugin": "5.3.9",
     "ts-jest": "29.1.0",
-    "ts-loader": "9.4.2",
+    "ts-loader": "9.4.4",
     "ts-morph": "18.0.0",
     "ts-node": "10.9.1",
     "tsconfig-paths": "4.2.0",
     "tscpaths": "0.0.9",
-    "type-fest": "3.9.0",
+    "type-fest": "4.2.0",
     "typescript": "5.0.4",
-    "webpack": "5.77.0",
+    "webpack": "5.88.2",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.13.3",
     "webpack-notifier": "1.15.0"

package/themeDescriptions/base/paradigm.js

@@ -63,6 +63,7 @@ exports.lightColors = {
         colorFieldBackground: '#ffffff',
         colorBackgroundModalInverse: '#303030',
         colorBackgroundContrastInverse: '#303030',
+        colorBackgroundContrastThemed: '#FFFFFF',
         colorBackgroundAccentTint: '#5a9eff',
         // Text
         colorTextAccent: '#005FF9',
@@ -82,7 +83,6 @@ exports.lightColors = {
         colorTextContrastThemed: '#FFFFFF',
         colorLinkContrast: '#FFFFFF',
         colorTextPositive: '#0DC268',
-        colorTextButton: '#005FF9',
         // Icons
         colorIconAccent: '#005FF9',
         colorIconAccentThemed: '#005FF9',
@@ -99,7 +99,6 @@ exports.lightColors = {
         colorIconContrastThemed: '#FFFFFF',
         colorIconPositive: '#0DC268',
         colorIconContrastSecondary: '#F2F3F5',
-        colorIconButton: '#005FF9',
         // Stroke
         colorStrokeAccent: '#005FF9',
         colorStrokeAccentThemed: '#005FF9',
@@ -113,13 +112,13 @@ exports.lightColors = {
         colorStrokePositive: '#0DC268',
         colorSeparatorPrimary2x: '#CDD0D5',
         colorSeparatorPrimary3x: '#BFC3CA',
-        colorStrokeButton: '#005FF9',
         // Palette
         colorAccentBlue: '#005FF9',
         colorAccentGray: '#A5A7AD',
         colorAccentRed: '#ED0A34',
         colorAccentGreen: '#0DC268',
         colorAccentOrange: '#FF9E00',
+        colorAccentOrangePeach: '#F9B54F',
         colorAccentOrangeFire: '#F05C44',
         colorAccentPurple: '#4F6DDC',
         colorAccentViolet: '#C15DF3',
@@ -146,6 +145,9 @@ exports.lightColors = {
         colorOverlaySecondary: 'rgb(44, 45, 46, 0.5)',
         colorSegmentedControl: '#FFFFFF',
         colorTabbarTextInactive: '#99A2AD',
+        colorButtonText: '#005FF9',
+        colorButtonIcon: '#005FF9',
+        colorButtonStroke: '#005FF9',
         colorTransparent: 'transparent',
     },
 };
@@ -185,6 +187,7 @@ exports.darkColors = {
         colorFieldBackground: '#232324',
         colorBackgroundModalInverse: '#ffffff',
         colorBackgroundContrastInverse: '#303030',
+        colorBackgroundContrastThemed: '#303030',
         colorBackgroundAccentTint: '#5a9eff',
         // Text
         colorTextAccent: '#3C82FD',
@@ -204,7 +207,6 @@ exports.darkColors = {
         colorTextContrastThemed: '#2C2D2E',
         colorLinkContrast: '#FFFFFF',
         colorTextPositive: '#0DC268',
-        colorTextButton: '#FFFFFF',
         // Icons
         colorIconAccent: '#3C82FD',
         colorIconAccentThemed: '#FFFFFF',
@@ -221,7 +223,6 @@ exports.darkColors = {
         colorIconContrastThemed: '#2C2D2E',
         colorIconPositive: '#0DC268',
         colorIconContrastSecondary: '#F2F3F5',
-        colorIconButton: '#FFFFFF',
         // Stroke
         colorStrokeAccent: '#3C82FD',
         colorStrokeAccentThemed: '#FFFFFF',
@@ -235,13 +236,13 @@ exports.darkColors = {
         colorSeparatorPrimary2x: '#202022',
         colorSeparatorPrimary3x: '#2d2d2f',
         colorStrokePositive: '#0DC268',
-        colorStrokeButton: '#FFFFFF',
         // Palette
         colorAccentBlue: '#2775FC',
         colorAccentGray: '#9C9DA2',
         colorAccentRed: '#ED0A34',
         colorAccentGreen: '#0DC268',
         colorAccentOrange: '#FF9E00',
+        colorAccentOrangePeach: '#FFC062',
         colorAccentOrangeFire: '#F05C44',
         colorAccentPurple: '#4F6DDC',
         colorAccentViolet: '#C15DF3',
@@ -268,6 +269,9 @@ exports.darkColors = {
         colorOverlaySecondary: 'rgb(55, 56, 57, 0.5)',
         colorSegmentedControl: '#626364',
         colorTabbarTextInactive: '#76787A',
+        colorButtonText: '#FFFFFF',
+        colorButtonIcon: '#FFFFFF',
+        colorButtonStroke: '#FFFFFF',
         colorTransparent: 'transparent',
     },
 };
@@ -581,10 +585,18 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
     sizeSubnavigationBarPaddingVertical: {
         regular: 12,
     }, 
+    // Размер границ
+    sizeBorder1x: {
+        regular: 1,
+    }, sizeBorder2x: {
+        regular: 0.5,
+    }, sizeBorder3x: {
+        regular: 0.33,
+    }, 
     // Стандартные токены для отступов
     spacingSizeXs: 4, spacingSizeS: 6, spacingSizeM: 8, spacingSizeL: 10, spacingSizeXl: 12, 
     // Прочие отступы
-    elevation1: '0 2px 0 0 rgba(0, 16, 61, 0.04)', elevation1InvertY: '0 -2px 0 0 rgba(0, 16, 61, 0.04)', elevation2: '0 4px 32px 0 rgba(0, 16, 61, 0.32)', elevation3: '0 16px 48px 0 rgba(0, 0, 0, 0.48)', elevation4: '0 16px 48px 0 rgba(0, 0, 0, 0.48)', gradientBlack: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#000000', 0.4), gradientWhite: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'), gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundTertiaryLight), animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', animationEasingPlatform: 'cubic-bezier(0.3, 0.3, 0.5, 1)', opacityDisable: 0.48, opacityDisableAccessibility: 0.64, zIndexModal: 99, zIndexPopout: 100 });
+    elevation1: '0 2px 6px 0 rgba(0, 16, 61, 0.08), 0 1px 2px 0 rgba(0, 16, 61, 0.08)', elevation1InvertY: '0 -2px 6px 0 rgba(0, 16, 61, 0.08), 0 -1px 2px 0 rgba(0, 16, 61, 0.08)', elevation2: '0 0 2px 0 rgba(0, 16, 61, 0.06), 0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06)', elevation3: '0 0 6px 0 rgba(0, 16, 61, 0.06), 0 6px 12px 0 rgba(0, 16, 61, 0.06), 0 6px 20px 0 rgba(0, 16, 61, 0.06), 0 10px 36px 0 rgba(0, 16, 61, 0.08)', elevation4: '0 2px 6px 0 rgba(0, 16, 61, 0.06), 0 16px 48px 0 rgba(0, 16, 61, 0.08), 0 24px 68px 0 rgba(0, 16, 61, 0.16)', gradientBlack: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#000000', 0.4), gradientWhite: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'), gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundTertiaryLight), animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', animationEasingPlatform: 'cubic-bezier(0.3, 0.3, 0.5, 1)', opacityDisable: 0.48, opacityDisableAccessibility: 0.64, zIndexModal: 99, zIndexPopout: 100 });
 var x05 = common_1.helpers.x05, x1 = common_1.helpers.x1, x2 = common_1.helpers.x2, x3 = common_1.helpers.x3, x4 = common_1.helpers.x4, x5 = common_1.helpers.x5, x6 = common_1.helpers.x6, x8 = common_1.helpers.x8, x10 = common_1.helpers.x10;
 exports.lightTheme = __assign(__assign(__assign({}, exports.lightThemeBase), common_1.helpers), { colors: __assign(__assign({}, exports.lightThemeBase.colors), { colorRating: '#ffd400', colorButtonContrastAlpha: {
             normal: 'rgba(255, 255, 255, 1)',

package/themeDescriptions/base/vk.js

@@ -86,6 +86,10 @@ var colorFromFigma = function (colorsScheme) {
                 },
             }[colorsScheme],
             colorBackgroundContrastInverse: background.background_contrast_inverse,
+            colorBackgroundContrastThemed: {
+                light: '#FFFFFF',
+                dark: '#323232',
+            }[colorsScheme],
             colorBackgroundModal: background.background_modal,
             colorBackgroundModalInverse: background.background_modal_inverse,
             colorBackgroundWarning: background.background_warning,
@@ -113,10 +117,6 @@ var colorFromFigma = function (colorsScheme) {
             colorTextLinkVisited: text.text_link_visited,
             colorTextMuted: text.text_muted,
             colorLinkContrast: text.link_contrast,
-            colorTextButton: {
-                light: '#2688eb',
-                dark: '#ffffff',
-            }[colorsScheme],
             // Icons
             colorIconAccent: icons.icon_accent,
             colorIconAccentThemed: icons.icon_accent_themed,
@@ -133,10 +133,6 @@ var colorFromFigma = function (colorsScheme) {
             colorIconContrastSecondary: icons.icon_contrast_secondary,
             colorIconPositive: icons.icon_positive,
             colorIconNegative: icons.icon_negative,
-            colorIconButton: {
-                light: '#2688eb',
-                dark: '#ffffff',
-            }[colorsScheme],
             // Stroke
             colorStrokeAccent: stroke.stroke_accent,
             colorStrokeAccentThemed: stroke.stroke_accent_themed,
@@ -163,16 +159,16 @@ var colorFromFigma = function (colorsScheme) {
                 },
                 dark: 'rgba(255, 255, 255, 0.12)',
             }[colorsScheme],
-            colorStrokeButton: {
-                light: '#2688eb',
-                dark: '#ffffff',
-            }[colorsScheme],
             // Palette
             colorAccentBlue: palette.accent_blue,
             colorAccentGray: palette.accent_gray,
             colorAccentRed: palette.accent_red,
             colorAccentGreen: palette.accent_green,
             colorAccentOrange: palette.accent_orange,
+            colorAccentOrangePeach: {
+                light: '#F9B54F',
+                dark: '#FFC062',
+            }[colorsScheme],
             colorAccentOrangeFire: palette.accent_orange_fire,
             colorAccentPurple: palette.accent_purple,
             colorAccentViolet: palette.accent_violet,
@@ -191,6 +187,18 @@ var colorFromFigma = function (colorsScheme) {
             colorImagePlaceholderAlpha: other.image_placeholder_alpha,
             colorSkeletonFrom: other.skeleton_from,
             colorSkeletonTo: other.skeleton_to,
+            colorButtonText: {
+                light: '#2688eb',
+                dark: '#ffffff',
+            }[colorsScheme],
+            colorButtonIcon: {
+                light: '#2688eb',
+                dark: '#ffffff',
+            }[colorsScheme],
+            colorButtonStroke: {
+                light: '#2688eb',
+                dark: '#ffffff',
+            }[colorsScheme],
             colorWriteBarIcon: other.write_bar_icon,
             colorWriteBarInputBackground: other.write_bar_input_background,
             colorWriteBarInputBorder: other.write_bar_input_border,
@@ -537,6 +545,14 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
     sizeSubnavigationBarPaddingVertical: {
         regular: 12,
     }, 
+    // Размер границ
+    sizeBorder1x: {
+        regular: 1,
+    }, sizeBorder2x: {
+        regular: 0.5,
+    }, sizeBorder3x: {
+        regular: 0.33,
+    }, 
     // Стандартные токены для отступов
     spacingSizeXs: 4, spacingSizeS: 6, spacingSizeM: 8, spacingSizeL: 10, spacingSizeXl: 12, 
     // Разное