@vkontakte/vkui-tokens 4.33.1 → 4.34.1

package/build/compilers/styles/compileStyles.d.ts

@@ -8,4 +8,4 @@ export declare function getRootSelector<PT extends PixelifyTheme>(theme: PT, mod
 /**
  * Компилирует строку со стилями (в разных форматах), на основе темы
  */
-export declare const compileStyles: <PT extends PixelifyTheme<import("../../../interfaces/general/tools/tokenValue").StaticTokens<import("../../../interfaces/general").Theme>> = PixelifyTheme<import("../../../interfaces/general/tools/tokenValue").StaticTokens<import("../../../interfaces/general").Theme>>>(format: Formats, theme: PT, mode?: CompileStylesMode, themeBase?: PT) => string;
+export declare const compileStyles: <PT extends PixelifyTheme = PixelifyTheme>(format: Formats, theme: PT, mode?: CompileStylesMode, themeBase?: PT) => string;

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

@@ -0,0 +1,199 @@
+import { Property } from 'csstype';
+import { ColorDescription, ColorWithStates } from '../../general/colors';
+import { GradientPoints } from '../../general/gradients';
+import { DefaultViewports } from '../../general/tools/viewports';
+import { ParadigmTheme, ParadigmThemeCssVars, ParadigmThemeDescription } from '../../namespaces/paradigm';
+interface PortalUITextColors {
+    /**
+     * @desc Цвет посещённой ссылки в саджестах поиска
+     * @tags color, text
+     */
+    portalColorTextLinkVisitedAlternative: ColorDescription;
+    /**
+     * @desc Цвет текста акцентного тултипа
+     * @tags color, text
+     */
+    portalColorTextBlueAccentThemed: ColorDescription;
+    /**
+     * @desc Цвет текста акцентного тултипа
+     * @tags color, text
+     */
+    portalColorTextGreenAccentThemed: ColorDescription;
+    /**
+     * @desc Цвет текста акцентного тултипа
+     * @tags color, text
+     */
+    portalColorTextOrangeAccentThemed: ColorDescription;
+    /**
+     * @desc Цвет текста акцентного тултипа
+     * @tags color, text
+     */
+    portalColorTextPurpleAccentThemed: ColorDescription;
+}
+interface PortalUIBackgroundColors {
+    /**
+     * @desc Цвет прозрачных синих фонов
+     * @tags color, background, alpha
+     */
+    portalColorBackgroundAccentAlpha: ColorDescription;
+    /**
+     * @desc Цвет акцентных синих фонов
+     * @tags color, background
+     */
+    portalColorBackgroundAccent: ColorDescription;
+    /**
+     * @desc Цвет табов
+     * @tags color, background, alpha
+     */
+    portalColorBackgroundAccentTabAlpha: ColorDescription;
+    /**
+     * @desc Цвет карточек (виджеты, пульс, баннер)
+     * @tags color, background
+     */
+    portalColorBackgroundCard: ColorDescription;
+    /**
+     * @desc Цвет фона страницы
+     * @tags color, background
+     */
+    portalColorBackground: ColorDescription;
+    /**
+     * @desc Цвет фона, одинаковый для всех тем
+     * @tags color, background
+     */
+    portalColorBackgroundInvariable: ColorDescription;
+    /**
+     * @desc Цвет оверлея под омнибоксом поиска
+     * @tags color, background
+     */
+    portalColorOverlayPrimaryAlpha: ColorDescription;
+    /**
+     * @desc Цвет контрастных блоков (видео, например)
+     * @tags color, background
+     */
+    portalColorBackgroundDark: ColorDescription;
+}
+interface PortalUIPaletteColors {
+    /**
+     * @desc Цвет фона акцентного тултипа
+     * @tags color, palette
+     */
+    portalColorPaletteSweetBlue: ColorDescription;
+    /**
+     * @desc Цвет фона акцентного тултипа
+     * @tags color, palette
+     */
+    portalColorPaletteSweetGreen: ColorDescription;
+    /**
+     * @desc Цвет фона акцентного тултипа
+     * @tags color, palette
+     */
+    portalColorPaletteSweetOrange: ColorDescription;
+    /**
+     * @desc Цвет фона акцентного тултипа
+     * @tags color, palette
+     */
+    portalColorPaletteSweetPurple: ColorDescription;
+    /**
+     * @desc Цвет фона акцентного тултипа
+     * @tags color, palette
+     */
+    portalColorPaletteLightBlue: ColorDescription;
+}
+type PortalUIColorsDescriptions = PortalUITextColors & PortalUIBackgroundColors & PortalUIPaletteColors;
+type PortalUIColors = {
+    [key in keyof PortalUIColorsDescriptions]: ColorWithStates;
+};
+interface PortalUIElevation {
+    /**
+     * @desc Стандартная тень для карточек
+     * @tags elevation
+     */
+    portalElevation1: Property.BoxShadow;
+    /**
+     * @desc Тень у карточек при наведении
+     * @tags elevation
+     */
+    portalElevation2: Property.BoxShadow;
+    /**
+     * @desc Тень у попапов, хинтов, модалок
+     * @tags elevation
+     */
+    portalElevation3: Property.BoxShadow;
+}
+interface PortalUIGradients {
+    /**
+     * @desc Градиент для обрезающихся элементов на фоне colorBackground
+     * @tags gradient
+     */
+    portalGradientBackground: GradientPoints;
+    /**
+     * @desc Градиент Hover для обрезающихся элементов на фоне portalColorBackground
+     * @tags gradient
+     */
+    portalGradientBackgroundHover: GradientPoints;
+    /**
+     * @desc Градиент Active для обрезающихся элементов на фоне colorBackground
+     * @tags gradient
+     */
+    portalGradientBackgroundActive: GradientPoints;
+    /**
+     * @desc Градиент для обрезающихся элементов на фоне portalColorBackground
+     * @tags gradient
+     */
+    portalGradientBackgroundSecondary: GradientPoints;
+    /**
+     * @desc Градиент для обрезающихся элементов на фоне portalColorBackgroundTertiary
+     * @tags gradient
+     */
+    portalGradientBackgroundTertiary: GradientPoints;
+    /**
+     * @desc Градиент для обрезающихся элементов на фоне colorBackgroundContent
+     * @tags gradient
+     */
+    portalGradientBackgroundContent: GradientPoints;
+    /**
+     * @desc Градиент для обрезающихся элементов на фоне colorBackgroundCard
+     * @tags gradient
+     */
+    portalGradientBackgroundCard: GradientPoints;
+    /**
+     * @desc Градиент Hover для обрезающихся элементов на фоне colorBackgroundCard
+     * @tags gradient
+     */
+    portalGradientBackgroundCardHover: GradientPoints;
+    /**
+     * @desc Градиент Active для обрезающихся элементов на фоне portalColorBackgroundCard
+     * @tags gradient
+     */
+    portalGradientBackgroundCardActive: GradientPoints;
+    /**
+     * @desc Градиент для обрезающихся элементов на фоне portalColorBackgroundModal
+     * @tags gradient
+     */
+    portalGradientBackgroundModal: GradientPoints;
+    /**
+     * @desc Градиент Hover для обрезающихся элементов на фоне portalColorBackgroundModal
+     * @tags gradient
+     */
+    portalGradientBackgroundModalHover: GradientPoints;
+    /**
+     * @desc Градиент Active для обрезающихся элементов на фоне portalColorBackgroundModal
+     * @tags gradient
+     */
+    portalGradientBackgroundModalActive: GradientPoints;
+    /**
+     * @desc Градиент для обрезающихся элементов на фоне portalColorBackgroundAccent
+     * @tags gradient
+     */
+    portalGradientBackgroundAccent: GradientPoints;
+}
+interface PortalUIUniqueTokens extends PortalUIElevation, PortalUIGradients {
+}
+export interface ThemePortalUI extends ParadigmTheme, PortalUIColors, PortalUIUniqueTokens {
+}
+export interface ThemePortalUIDescription extends ParadigmThemeDescription, PortalUIUniqueTokens {
+    colors: ParadigmThemeDescription['colors'] & PortalUIColorsDescriptions;
+}
+export interface ThemePortalUICssVars extends ParadigmThemeCssVars<DefaultViewports, ThemePortalUI> {
+}
+export {};

package/interfaces/themes/portalUI/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,7 @@
+import { ThemePortalUI, ThemePortalUICssVars, ThemePortalUIDescription } from '../portalUI';
+export interface ThemePortalUIDark extends ThemePortalUI {
+}
+export interface ThemePortalUIDarkDescription extends ThemePortalUIDescription {
+}
+export interface ThemePortalUIDarkCssVars extends ThemePortalUICssVars {
+}

package/interfaces/themes/portalUIDark/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.33.1",
+  "version": "4.34.1",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",
@@ -32,14 +32,14 @@
     "csstype": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "7.21.3",
-    "@svgr/webpack": "6.5.1",
+    "@babel/core": "7.21.4",
+    "@svgr/webpack": "7.0.0",
     "@types/color": "3.0.3",
     "@types/common-tags": "1.8.1",
     "@types/fs-extra": "11.0.1",
     "@types/node": "18.11.10",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
+    "@types/react-dom": "18.2.1",
+    "@types/react": "18.2.0",
     "@typescript-eslint/eslint-plugin": "4.33.0",
     "@typescript-eslint/parser": "4.33.0",
     "@vkontakte/appearance": "https://github.com/VKCOM/Appearance#v10.1.2",
@@ -70,13 +70,13 @@
     "fs-extra": "11.1.1",
     "html-webpack-plugin": "5.5.0",
     "jest": "29.5.0",
-    "jest-junit": "15.0.0",
+    "jest-junit": "16.0.0",
     "lodash": "4.17.21",
     "prettier": "2.8.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "rimraf": "4.4.1",
-    "style-loader": "3.3.1",
+    "rimraf": "5.0.0",
+    "style-loader": "3.3.2",
     "terser-webpack-plugin": "5.3.7",
     "ts-jest": "29.1.0",
     "ts-loader": "9.4.2",
@@ -84,11 +84,11 @@
     "ts-node": "10.9.1",
     "tsconfig-paths": "4.2.0",
     "tscpaths": "0.0.9",
-    "type-fest": "3.6.1",
-    "typescript": "4.9.5",
+    "type-fest": "3.9.0",
+    "typescript": "5.0.4",
     "webpack": "5.77.0",
     "webpack-cli": "5.0.1",
-    "webpack-dev-server": "4.11.1",
+    "webpack-dev-server": "4.13.3",
     "webpack-notifier": "1.15.0"
   },
   "engines": {