@vkontakte/vkui-tokens 4.58.0 → 4.59.0

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

@@ -56,6 +56,11 @@ export interface ColorsDescriptionStruct {
      * @tags color, background
      */
     colorBackgroundContent: ColorDescription;
+    /**
+     * @desc Цвет фона с прозрачностью
+     * @tags color, background
+     */
+    colorBackgroundContentAlpha: ColorDescription;
     /**
      * @desc Цвет фона, противоположный фону контента.
      * @tags color, background
@@ -347,10 +352,15 @@ export interface ColorsDescriptionStruct {
      */
     colorStrokeNegative: ColorDescription;
     /**
-     * @desc Контрастный цвет для обводки. Не меняется в зивисимости от темы
+     * @desc Контрастный цвет для обводки. Не меняется в зависимости от темы
      * @tags color, stroke
      */
     colorStrokeContrast: ColorDescription;
+    /**
+     * @desc Нейтральный цвет для обводки.
+     * @tags color, stroke
+     */
+    colorStrokePrimary: ColorDescription;
     /**
      * @desc Цвет обводки для изображений с прозрачностью
      * @tags color, component, alpha

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

@@ -61,11 +61,21 @@ export interface Sizes {
      * @tags size, stroke
      */
     sizeBorderRadiusPromo: number;
+    /**
+     * @desc Минимальная высота ячейки
+     * @tags size, component
+     */
+    sizeCellHeight: number;
     /**
      * @desc Высота полей ввода, селектов и других похожих компонентов
      * @tags size, component
      */
     sizeFieldHeight: number;
+    /**
+     * @desc Высота очень маленьких кнопок
+     * @tags size, component
+     */
+    sizeButtonExtraSmallHeight: number;
     /**
      * @desc Высота маленьких кнопок
      * @tags size, component

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

@@ -1,16 +1 @@
-import { ThemeCssVars } from '../../general';
-import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
-import { LocalVkontakteAndroidColorsDescriptionStruct, ThemeVkontakteAndroid, ThemeVkontakteAndroidDescription } from '../vkontakteAndroid';
-export interface LocalLegoAndroidColorsDescriptionStruct {
-    colorStrokePrimary: ColorDescription;
-}
-export type LegoAndroidLocalColors = {
-    [key in keyof LocalLegoAndroidColorsDescriptionStruct]: ColorWithStates;
-};
-export interface ThemeLegoAndroid extends ThemeVkontakteAndroid, LegoAndroidLocalColors {
-}
-export interface ThemeLegoAndroidDescription extends ThemeVkontakteAndroidDescription {
-    colors: LocalLegoAndroidColorsDescriptionStruct & LocalVkontakteAndroidColorsDescriptionStruct & ColorsDescriptionStruct;
-}
-export interface ThemeLegoAndroidCssVars extends ThemeCssVars<ThemeLegoAndroid> {
-}
+export { ThemeVkontakteAndroid as ThemeLegoAndroid, ThemeVkontakteAndroidCssVars as ThemeLegoAndroidCssVars, ThemeVkontakteAndroidDescription as ThemeLegoAndroidDescription, } from '../vkontakteAndroid';

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

@@ -1,16 +1 @@
-import { ThemeCssVars } from '../../general';
-import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
-import { ThemeVkIOS, ThemeVkIOSDescription } from '../vkIOS';
-export interface LocalLegoIOSColorsDescriptionStruct {
-    colorStrokePrimary: ColorDescription;
-}
-export type LegoIOSLocalColors = {
-    [key in keyof LocalLegoIOSColorsDescriptionStruct]: ColorWithStates;
-};
-export interface ThemeLegoIOS extends ThemeVkIOS, LegoIOSLocalColors {
-}
-export interface ThemeLegoIOSDescription extends ThemeVkIOSDescription {
-    colors: LocalLegoIOSColorsDescriptionStruct & ColorsDescriptionStruct;
-}
-export interface ThemeLegoIOSCssVars extends ThemeCssVars<ThemeLegoIOS> {
-}
+export { ThemeVkIOS as ThemeLegoIOS, ThemeVkIOSCssVars as ThemeLegoIOSCssVars, ThemeVkIOSDescription as ThemeLegoIOSDescription, } from '../vkIOS';

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

@@ -1 +1 @@
-export { ThemeVkBase as ThemeVkAccessibilityIOS, ThemeVkBaseCssVars as ThemeVkAccessibilityIOSCssVars, ThemeVkBaseDescription as ThemeVkAccessibilityIOSDescription, } from '../vkBase';
+export { ThemeVkIOS as ThemeVkAccessibilityIOS, ThemeVkIOSCssVars as ThemeVkAccessibilityIOSCssVars, ThemeVkIOSDescription as ThemeVkAccessibilityIOSDescription, } from '../vkIOS';

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

@@ -1 +1 @@
-export { ThemeVkBaseDark as ThemeVkAccessibilityIOSDark, ThemeVkBaseDarkCssVars as ThemeVkAccessibilityIOSDarkCssVars, ThemeVkBaseDarkDescription as ThemeVkAccessibilityIOSDarkDescription, } from '../vkBaseDark';
+export { ThemeVkAccessibilityIOS as ThemeVkAccessibilityIOSDark, ThemeVkAccessibilityIOSCssVars as ThemeVkAccessibilityIOSDarkCssVars, ThemeVkAccessibilityIOSDescription as ThemeVkAccessibilityIOSDarkDescription, } from '../vkAccessibilityIOS';

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

@@ -1 +1 @@
-export { ThemeVkBaseDark as ThemeVkIdOkDark, ThemeVkBaseDarkCssVars as ThemeVkIdOkDarkCssVars, ThemeVkBaseDarkDescription as ThemeVkIdOkDarkDescription, } from '../vkBaseDark';
+export { ThemeVkIdOk as ThemeVkIdOkDark, ThemeVkIdOkCssVars as ThemeVkIdOkDarkCssVars, ThemeVkIdOkDescription as ThemeVkIdOkDarkDescription, } from '../vkIdOk';

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

@@ -1 +1 @@
-export { ThemeVkBase as ThemeVkIdOkIOS, ThemeVkBaseCssVars as ThemeVkIdOkIOSCssVars, ThemeVkBaseDescription as ThemeVkIdOkIOSDescription, } from '../vkBase';
+export { ThemeVkIOS as ThemeVkIdOkIOS, ThemeVkIOSCssVars as ThemeVkIdOkIOSCssVars, ThemeVkIOSDescription as ThemeVkIdOkIOSDescription, } from '../vkIOS';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.58.0",
+  "version": "4.59.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "homepage": "https://vkcom.github.io/vkui-tokens",
@@ -19,7 +19,7 @@
     "tsc:dist": "tsc --project tsconfig.publish.json",
     "tsc:generate-paths": "tscpaths -p tsconfig.tscpaths.json -s ./dist -o ./dist",
     "test": "jest --coverage",
-    "test:ci": "jest --coverage --verbose --reporters=\"jest-junit\" --reporters=\"default\"",
+    "test:ci": "jest --ci --silent --outputFile test-results.json --json --coverage --coverageReporters='json' --coverageDirectory='.nyc_output'",
     "clear:src": "find src -name '*.d.ts' -delete &&  find src -name '*.js' -delete",
     "clear:dist": "find dist -regex '.*[^d]\\.ts' -delete",
     "open:coverage": "open .coverage/index.html",

package/themeDescriptions/base/paradigm.js

@@ -37,6 +37,7 @@ exports.lightColors = {
         colorBackgroundAccentThemedAlpha: 'rgba(0, 119, 255, 0.2)',
         colorBackgroundAccentAlternative: '#FF9E00',
         colorBackgroundContent: '#FFFFFF',
+        colorBackgroundContentAlpha: 'rgba(255, 255, 255, 0.8)',
         colorBackgroundContentInverse: colorBackgroundContentDark,
         colorBackgroundSecondary: '#F0F1F3',
         colorBackgroundSecondaryAlpha: {
@@ -111,6 +112,7 @@ exports.lightColors = {
         colorStrokeAccentThemed: '#0077ff',
         colorStrokeContrast: '#FFFFFF',
         colorStrokeNegative: '#ED330a',
+        colorStrokePrimary: '#2C2D2E',
         colorImageBorderAlpha: 'rgba(0, 16, 61, 0.08)',
         colorFieldBorderAlpha: 'rgba(0, 16, 61, 0.12)',
         colorSeparatorPrimaryAlpha: 'rgba(0, 16, 61, 0.12)',
@@ -171,6 +173,7 @@ exports.darkColors = {
         colorBackgroundAccentThemedAlpha: 'rgba(255, 255, 255, 0.2)',
         colorBackgroundAccentAlternative: '#FF9E00',
         colorBackgroundContent: colorBackgroundContentDark,
+        colorBackgroundContentAlpha: 'rgba(35, 35, 36, 0.8)',
         colorBackgroundContentInverse: '#FFFFFF',
         colorBackgroundSecondary: '#2A2A2B',
         colorBackgroundSecondaryAlpha: {
@@ -245,6 +248,7 @@ exports.darkColors = {
         colorStrokeAccentThemed: '#FFFFFF',
         colorStrokeContrast: '#FFFFFF',
         colorStrokeNegative: '#FF5C5C',
+        colorStrokePrimary: '#D9DADD',
         colorImageBorderAlpha: 'rgba(255, 255, 255, 0.08)',
         colorFieldBorderAlpha: 'rgba(255, 255, 255, 0.16)',
         colorSeparatorPrimaryAlpha: 'rgba(0, 0, 0, 0.4)',
@@ -496,21 +500,27 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
         regular: 12,
     }, sizeBorderRadiusPromo: {
         regular: 20,
+    }, sizeCellHeight: {
+        regular: 48,
+        compact: 44,
     }, sizeFieldHeight: {
         regular: 44,
         compact: 36,
     }, sizeSearchHeight: {
         regular: 36,
         compact: 32,
-    }, sizeButtonLargeHeight: {
-        regular: 44,
-        compact: 36,
-    }, sizeButtonMediumHeight: {
-        regular: 36,
-        compact: 32,
+    }, sizeButtonExtraSmallHeight: {
+        regular: 24,
+        compact: 22,
     }, sizeButtonSmallHeight: {
         regular: 30,
         compact: 28,
+    }, sizeButtonMediumHeight: {
+        regular: 36,
+        compact: 32,
+    }, sizeButtonLargeHeight: {
+        regular: 44,
+        compact: 36,
     }, sizeCheckbox: {
         regular: 16,
     }, sizeArrow: {

package/themeDescriptions/base/vk.d.ts

@@ -1,5 +1,6 @@
 import { ColorsDescription, ThemeDescription } from '../../interfaces/general';
 import { Elevation } from '../../interfaces/general/elevation';
+import { Sizes } from '../../interfaces/general/geometry';
 import { Gradients } from '../../interfaces/general/gradients';
 import { Adaptive } from '../../interfaces/general/tools';
 import { Fonts, TypographyBaseProps } from '../../interfaces/general/typography';
@@ -14,6 +15,10 @@ type BaseFonts = Omit<{
     [key in keyof Fonts]: Adaptive<Fonts[key]>;
 }, 'fontHeadline'> & TypographyBaseProps;
 export declare const fonts: BaseFonts;
+type BaseSizes = {
+    [key in keyof Sizes]: Adaptive<Sizes[key]>;
+};
+export declare const sizes: BaseSizes;
 export declare const lightTheme: ThemeDescription;
 export declare const darkTheme: ThemeDescription;
 export {};

package/themeDescriptions/base/vk.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.darkTheme = exports.lightTheme = exports.fonts = exports.darkElevation = exports.darkGradient = exports.darkColors = exports.lightElevation = exports.lightGradient = exports.lightColors = exports.colorFromFigma = void 0;
+exports.darkTheme = exports.lightTheme = exports.sizes = exports.fonts = exports.darkElevation = exports.darkGradient = exports.darkColors = exports.lightElevation = exports.lightGradient = exports.lightColors = exports.colorFromFigma = void 0;
 var getGradientPointsFromColor_1 = require("../../build/helpers/getGradientPointsFromColor");
 var tokenHelpers_1 = require("../../build/helpers/tokenHelpers");
 var vk_json_1 = __importDefault(require("./figma/vk.json"));
@@ -45,6 +45,10 @@ var colorFromFigma = function (colorsScheme) {
             }[colorsScheme],
             colorBackground: background.background,
             colorBackgroundContent: background.background_content,
+            colorBackgroundContentAlpha: {
+                light: 'rgba(255, 255, 255, 0.8)',
+                dark: 'rgba(25, 25, 26, 0.8)',
+            }[colorsScheme],
             colorBackgroundContentInverse: {
                 light: '#19191A',
                 dark: '#FFFFFF',
@@ -187,6 +191,10 @@ var colorFromFigma = function (colorsScheme) {
             colorStrokePositive: stroke.stroke_positive,
             colorStrokeNegative: stroke.stroke_negative,
             colorStrokeContrast: stroke.stroke_contrast,
+            colorStrokePrimary: {
+                light: '#2C2D2E',
+                dark: '#E1E3E6',
+            }[colorsScheme],
             colorImageBorderAlpha: stroke.image_border_alpha,
             colorFieldBorderAlpha: {
                 light: {
@@ -500,179 +508,245 @@ exports.fonts = {
         },
     },
 };
-exports.lightTheme = __assign(__assign(__assign(__assign(__assign({ themeName: 'vkBase', themeNameBase: 'vkBase' }, exports.lightColors), exports.lightGradient), exports.lightElevation), exports.fonts), { fontHeadline: (0, tokenHelpers_1.alias)('fontHeadline1'), 
+exports.sizes = {
     // Размеры
     sizeSelectIconPadding: {
         regular: 6,
         compact: 7,
-    }, sizePopupBasePadding: {
+    },
+    sizePopupBasePadding: {
         regular: 32,
         compact: 20,
-    }, sizePopupHeaderPadding: {
+    },
+    sizePopupHeaderPadding: {
         regular: 24,
         compact: 16,
-    }, sizeLabelHorizontalMargin: {
+    },
+    sizeLabelHorizontalMargin: {
         regular: 16,
-    }, sizeBorderRadius: {
+    },
+    sizeBorderRadius: {
         regular: 8,
-    }, sizeBorderRadiusRounded: {
+    },
+    sizeBorderRadiusRounded: {
         regular: 48,
-    }, sizeCheckBorderRadius: {
+    },
+    sizeCheckBorderRadius: {
         regular: 4,
-    }, sizeBorderRadiusPaper: {
+    },
+    sizeBorderRadiusPaper: {
         regular: 12,
-    }, sizeBorderRadiusPromo: {
+    },
+    sizeBorderRadiusPromo: {
         regular: 20,
-    }, sizeFieldHeight: {
-        regular: 44,
-        compact: 36,
-    }, sizeSearchHeight: {
-        regular: 36,
-        compact: 32,
-    }, sizeButtonLargeHeight: {
+    },
+    sizeCellHeight: {
+        regular: 48,
+        compact: 44,
+    },
+    sizeFieldHeight: {
         regular: 44,
         compact: 36,
-    }, sizeButtonMediumHeight: {
+    },
+    sizeSearchHeight: {
         regular: 36,
         compact: 32,
-    }, sizeButtonSmallHeight: {
+    },
+    sizeButtonExtraSmallHeight: {
+        regular: 24,
+        compact: 22,
+    },
+    sizeButtonSmallHeight: {
         regular: 30,
         compact: 28,
-    }, sizeCheckbox: {
+    },
+    sizeButtonMediumHeight: {
+        regular: 36,
+        compact: 32,
+    },
+    sizeButtonLargeHeight: {
+        regular: 44,
+        compact: 36,
+    },
+    sizeCheckbox: {
         regular: 16,
-    }, sizeArrow: {
+    },
+    sizeArrow: {
         regular: 8,
-    }, sizeArrowPromo: {
+    },
+    sizeArrowPromo: {
         regular: 40,
-    }, sizePopupSmall: {
+    },
+    sizePopupSmall: {
         regular: 430,
-    }, sizePopupMedium: {
+    },
+    sizePopupMedium: {
         regular: 680,
-    }, sizePopupLarge: {
+    },
+    sizePopupLarge: {
         regular: 880,
-    }, sizeFieldHorizontalPadding: {
+    },
+    sizeFieldHorizontalPadding: {
         regular: 12,
-    }, sizeButtonPaddingHorizontal: {
+    },
+    sizeButtonPaddingHorizontal: {
         regular: 12,
-    }, sizeArrowPadding: {
+    },
+    sizeArrowPadding: {
         regular: 12,
-    }, sizeTooltipMargin: {
+    },
+    sizeTooltipMargin: {
         regular: 8,
-    }, sizeIconUI: {
+    },
+    sizeIconUI: {
         regular: 16,
-    }, sizeAvatarXS: {
+    },
+    sizeAvatarXS: {
         regular: 24,
-    }, sizeAvatarS: {
+    },
+    sizeAvatarS: {
         regular: 32,
-    }, sizeAvatarM: {
+    },
+    sizeAvatarM: {
         regular: 48,
-    }, sizeAvatarL: {
+    },
+    sizeAvatarL: {
         regular: 96,
-    }, sizeAvatarXL: {
+    },
+    sizeAvatarXL: {
         regular: 128,
-    }, sizeBadgeXS: {
+    },
+    sizeBadgeXS: {
         regular: 12,
-    }, sizeBadgeS: {
+    },
+    sizeBadgeS: {
         regular: 16,
-    }, sizeBadgeM: {
+    },
+    sizeBadgeM: {
         regular: 24,
-    }, sizeBadgeL: {
+    },
+    sizeBadgeL: {
         regular: 44,
-    }, sizeBadgeXL: {
+    },
+    sizeBadgeXL: {
         regular: 56,
-    }, 
+    },
     // Токены компонента Cardscroll
     sizeCardgridPadding: {
         regular: 8,
-    }, sizeCardBorderRadius: {
+    },
+    sizeCardBorderRadius: {
         regular: 8,
-    }, sizeCardgridPaddingVertical: {
+    },
+    sizeCardgridPaddingVertical: {
         regular: 8,
-    }, sizeBasePaddingHorizontal: {
+    },
+    sizeBasePaddingHorizontal: {
         regular: 16,
-    }, sizeBasePaddingVertical: {
+    },
+    sizeBasePaddingVertical: {
         regular: 12,
-    }, 
+    },
     // Токены для ButtonGroup
     sizeButtonGroupGapSpace: {
         regular: 1,
-    }, sizeButtonGroupGapSmall: {
+    },
+    sizeButtonGroupGapSmall: {
         regular: 8,
-    }, sizeButtonGroupGapMedium: {
+    },
+    sizeButtonGroupGapMedium: {
         regular: 12,
-    }, 
+    },
     // Токены иерархии
     sizeOptionHierarchy: {
         regular: 32,
-    }, 
+    },
     // Компонент Switch
     sizeSwitchHeight: {
         regular: 14,
         compact: 12,
-    }, sizeSwitchWidth: {
+    },
+    sizeSwitchWidth: {
         regular: 34,
         compact: 32,
-    }, sizeSwitchPin: {
+    },
+    sizeSwitchPin: {
         regular: 20,
         compact: 18,
-    }, 
+    },
     // Компонент PanelHeader
     sizePanelHeaderHeight: {
         compact: 48,
         regular: 56,
-    }, 
+    },
     // Токены отступов для кнопок
     sizeButtonBaseSmallPaddingHorizontal: {
         regular: 16,
-    }, sizeButtonBaseMediumPaddingHorizontal: {
+    },
+    sizeButtonBaseMediumPaddingHorizontal: {
         regular: 16,
-    }, sizeButtonBaseLargePaddingHorizontal: {
+    },
+    sizeButtonBaseLargePaddingHorizontal: {
         regular: 20,
-    }, sizeButtonBaseSmallPaddingHorizontalIcon: {
+    },
+    sizeButtonBaseSmallPaddingHorizontalIcon: {
         regular: 12,
-    }, sizeButtonBaseMediumPaddingHorizontalIcon: {
+    },
+    sizeButtonBaseMediumPaddingHorizontalIcon: {
         regular: 12,
-    }, sizeButtonBaseLargePaddingHorizontalIcon: {
+    },
+    sizeButtonBaseLargePaddingHorizontalIcon: {
         regular: 16,
-    }, sizeButtonTertiarySmallPaddingHorizontal: {
+    },
+    sizeButtonTertiarySmallPaddingHorizontal: {
         regular: 12,
-    }, sizeButtonTertiaryMediumPaddingHorizontal: {
+    },
+    sizeButtonTertiaryMediumPaddingHorizontal: {
         regular: 12,
-    }, sizeButtonTertiaryLargePaddingHorizontal: {
+    },
+    sizeButtonTertiaryLargePaddingHorizontal: {
         regular: 16,
-    }, sizeButtonTertiarySmallPaddingHorizontalIcon: {
+    },
+    sizeButtonTertiarySmallPaddingHorizontalIcon: {
         regular: 8,
-    }, sizeButtonTertiaryMediumPaddingHorizontalIcon: {
+    },
+    sizeButtonTertiaryMediumPaddingHorizontalIcon: {
         regular: 8,
-    }, sizeButtonTertiaryLargePaddingHorizontalIcon: {
+    },
+    sizeButtonTertiaryLargePaddingHorizontalIcon: {
         regular: 12,
-    }, sizeButtonMinimumWidth: {
+    },
+    sizeButtonMinimumWidth: {
         regular: 80,
-    }, 
+    },
     // FormItem
     sizeFormItemPaddingVertical: {
         regular: 12,
-    }, 
+    },
     // Отступ для компонента SplitCol
     sizeSplitColPaddingHorizontal: {
         regular: 16,
-    }, 
+    },
     // Для регулирования расстояния между элементами в SubnavigationBar
     sizeSubnavigationBarGap: {
         regular: 8,
-    }, 
+    },
     // Внешние отступы(верхний и нижний) для SubnavigationBar
     sizeSubnavigationBarPaddingVertical: {
         regular: 12,
-    }, 
+    },
     // Размер границ
     sizeBorder1x: {
         regular: 1,
-    }, sizeBorder2x: {
+    },
+    sizeBorder2x: {
         regular: 0.5,
-    }, sizeBorder3x: {
+    },
+    sizeBorder3x: {
         regular: 0.33,
-    }, 
+    },
+};
+exports.lightTheme = __assign(__assign(__assign(__assign(__assign(__assign(__assign({ themeName: 'vkBase', themeNameBase: 'vkBase' }, exports.lightColors), exports.lightGradient), exports.lightElevation), exports.fonts), { fontHeadline: (0, tokenHelpers_1.alias)('fontHeadline1') }), exports.sizes), { 
     // Стандартные токены для отступов
     spacingSize3Xs: 2, spacingSize2Xs: 2, spacingSizeXs: 4, spacingSizeS: 6, spacingSizeM: 8, spacingSizeL: 10, spacingSizeXl: 12, spacingSize2Xl: 16, spacingSize3Xl: 20, spacingSize4Xl: 24, 
     // Разное