@vkontakte/vkui-tokens 4.30.0 → 4.30.1-dev-ff0eeb.0

package/build/helpers/appearance.d.ts

@@ -0,0 +1,5 @@
+export interface ClusterData {
+    color_identifier: string;
+    alpha_multiplier?: number;
+}
+export declare function resolveColor(clusterData: ClusterData, palette?: Record<string, string>): string;

package/build/helpers/appearance.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveColor = void 0;
+var palette_json_1 = __importDefault(require("@vkontakte/appearance/main.valette/palette.json"));
+/* eslint-enable @typescript-eslint/naming-convention */
+function resolveColor(clusterData, palette) {
+    if (palette === void 0) { palette = palette_json_1.default; }
+    var color = palette[clusterData.color_identifier];
+    var alphaMultiplier = clusterData.alpha_multiplier ? Number(clusterData.alpha_multiplier) : 1;
+    if (!color) {
+        throw new Error("Missing color: ".concat(clusterData.color_identifier));
+    }
+    else if (color.indexOf('#') === 0 && color.length === 9) {
+        // ahex
+        return ahex2rgba(color.replace('#', ''), alphaMultiplier);
+    }
+    else if (color.indexOf('#') === 0 && clusterData.alpha_multiplier) {
+        return opacify(color.replace('#', ''), alphaMultiplier);
+    }
+    return color;
+}
+exports.resolveColor = resolveColor;
+function ahex2rgba(ahex, multiplier) {
+    if (multiplier === void 0) { multiplier = 1; }
+    var opacity = (parseInt(ahex.slice(0, 2), 16) / 255) * multiplier;
+    var colorHex = ahex.slice(2);
+    return opacify(colorHex, opacity);
+}
+function opacify(hex, opacity) {
+    return "rgba(".concat(parseInt(hex.slice(0, 2), 16), ", ").concat(parseInt(hex.slice(2, 4), 16), ", ").concat(parseInt(hex.slice(4), 16), ", ").concat(opacity.toFixed(2), ")");
+}

package/build/helpers/appearance.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/helpers/appearance.test.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable @typescript-eslint/naming-convention */
+var appearance_1 = require("./appearance");
+describe('vkCom/appearance', function () {
+    test('white', function () {
+        expect((0, appearance_1.resolveColor)({
+            color_identifier: 'white',
+        })).toBe('#FFFFFF');
+    });
+    test('white_alpha12', function () {
+        expect((0, appearance_1.resolveColor)({
+            color_identifier: 'white_alpha12',
+        })).toBe('rgba(255, 255, 255, 0.12)');
+    });
+    test('white with alpha_multiplier', function () {
+        expect((0, appearance_1.resolveColor)({
+            color_identifier: 'white',
+            alpha_multiplier: 0.04,
+        })).toBe('rgba(255, 255, 255, 0.04)');
+    });
+    test('missing color', function () {
+        expect(function () {
+            return (0, appearance_1.resolveColor)({
+                color_identifier: 'impossible',
+            });
+        }).toThrow();
+    });
+});

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

@@ -0,0 +1,203 @@
+import { Theme, ThemeCssVars, ThemeDescription } from '../../general';
+import { ColorDescription, ColorsDescriptionStruct, ColorWithStates } from '../../general/colors';
+import { GradientPoints } from '../../general/gradients';
+import { Tokens } from '../../general/tools/tokenValue';
+export interface VkGradients {
+    /**
+     * @desc Градиент AquamarineBlue
+     * @tags gradient
+     */
+    gradientAquamarineBlue: GradientPoints;
+    /**
+     * @desc Градиент Blue
+     * @tags gradient
+     */
+    gradientBlue: GradientPoints;
+    /**
+     * @desc Градиент Candy
+     * @tags gradient
+     */
+    gradientCandy: GradientPoints;
+    /**
+     * @desc Градиент Crimson
+     * @tags gradient
+     */
+    gradientCrimson: GradientPoints;
+    /**
+     * @desc Градиент Disco
+     * @tags gradient
+     */
+    gradientDisco: GradientPoints;
+    /**
+     * @desc Градиент Emerald
+     * @tags gradient
+     */
+    gradientEmerald: GradientPoints;
+    /**
+     * @desc Градиент Gray
+     * @tags gradient
+     */
+    gradientGray: GradientPoints;
+    /**
+     * @desc Градиент Green
+     * @tags gradient
+     */
+    gradientGreen: GradientPoints;
+    /**
+     * @desc Градиент Lagoon
+     * @tags gradient
+     */
+    gradientLagoon: GradientPoints;
+    /**
+     * @desc Градиент Lavender
+     * @tags gradient
+     */
+    gradientLavender: GradientPoints;
+    /**
+     * @desc Градиент Marine
+     * @tags gradient
+     */
+    gradientMarine: GradientPoints;
+    /**
+     * @desc Градиент Midnight
+     * @tags gradient
+     */
+    gradientMidnight: GradientPoints;
+    /**
+     * @desc Градиент Orange
+     * @tags gradient
+     */
+    gradientOrange: GradientPoints;
+    /**
+     * @desc Градиент Pink
+     * @tags gradient
+     */
+    gradientPink: GradientPoints;
+    /**
+     * @desc Градиент Purple
+     * @tags gradient
+     */
+    gradientPurple: GradientPoints;
+    /**
+     * @desc Градиент RaspberryPink
+     * @tags gradient
+     */
+    gradientRaspberryPink: GradientPoints;
+    /**
+     * @desc Градиент Red
+     * @tags gradient
+     */
+    gradientRed: GradientPoints;
+    /**
+     * @desc Градиент Retrowave
+     * @tags gradient
+     */
+    gradientRetrowave: GradientPoints;
+    /**
+     * @desc Градиент Sunset
+     * @tags gradient
+     */
+    gradientSunset: GradientPoints;
+    /**
+     * @desc Градиент Turquoise
+     * @tags gradient
+     */
+    gradientTurquoise: GradientPoints;
+    /**
+     * @desc Градиент Twilight
+     * @tags gradient
+     */
+    gradientTwilight: GradientPoints;
+    /**
+     * @desc Градиент Unicorn
+     * @tags gradient
+     */
+    gradientUnicorn: GradientPoints;
+    /**
+     * @desc Градиент Violet
+     * @tags gradient
+     */
+    gradientViolet: GradientPoints;
+    /**
+     * @desc Градиент Yellow
+     * @tags gradient
+     */
+    gradientYellow: GradientPoints;
+    /**
+     * @desc Градиент YellowBright
+     * @tags gradient
+     */
+    gradientYellowBright: GradientPoints;
+    /**
+     * @desc Градиент HalloweenOrange
+     * @tags gradient
+     */
+    gradientHalloweenOrange: GradientPoints;
+    /**
+     * @desc Градиент HalloweenViolet
+     * @tags gradient
+     */
+    gradientHalloweenViolet: GradientPoints;
+    /**
+     * @desc Градиент NewYear
+     * @tags gradient
+     */
+    gradientNewYear: GradientPoints;
+    /**
+     * @desc Градиент Frost
+     * @tags gradient
+     */
+    gradientFrost: GradientPoints;
+    /**
+     * @desc Градиент Valentine
+     * @tags gradient
+     */
+    gradientValentine: GradientPoints;
+    /**
+     * @desc Градиент WarmValentine
+     * @tags gradient
+     */
+    gradientWarmValentine: GradientPoints;
+    /**
+     * @desc Градиент Sberkot
+     * @tags gradient
+     */
+    gradientSberkot: GradientPoints;
+    /**
+     * @desc Градиент Mable
+     * @tags gradient
+     */
+    gradientMable: GradientPoints;
+    /**
+     * @desc Градиент WomensDay
+     * @tags gradient
+     */
+    gradientWomensDay: GradientPoints;
+}
+export interface LocalVkColorsDescriptionStruct {
+    colorSnippetBorderAlpha: ColorDescription;
+    colorModalCardBorderAlpha: ColorDescription;
+    colorLandingSnippetBorderAlpha: ColorDescription;
+    colorActionSheetSeparatorAlpha: ColorDescription;
+    colorInputBorder: ColorDescription;
+    colorImForwardLineAlpha: ColorDescription;
+    colorImBubbleBorderAlternateHighlightedAlpha: ColorDescription;
+    colorImBubbleIncoming: ColorDescription;
+    colorImBubbleIncomingAlternate: ColorDescription;
+    colorImBubbleIncomingExpiring: ColorDescription;
+    colorImBubbleOutgoing: ColorDescription;
+    colorImBubbleOutgoingExpiringHighlighted: ColorDescription;
+    colorImBubbleGiftText: ColorDescription;
+    colorImBubbleGiftTextSecondary: ColorDescription;
+    colorImTextName: ColorDescription;
+}
+export type VkLocalColors = {
+    [key in keyof LocalVkColorsDescriptionStruct]: ColorWithStates;
+};
+export interface VkTheme extends Theme, VkGradients, VkLocalColors {
+}
+export interface VkThemeDescription extends ThemeDescription, Tokens<VkGradients> {
+    colors: LocalVkColorsDescriptionStruct & ColorsDescriptionStruct;
+}
+export interface VkThemeCssVars extends ThemeCssVars<VkTheme> {
+}

package/interfaces/namespaces/vk/index.js

@@ -1 +1,2 @@
-// место где можно оперделить локальные переменные вк, как вариант
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -1,7 +1,7 @@
-import { Theme, ThemeCssVars, ThemeDescription } from '../../general';
-export interface ThemeVkBase extends Theme {
+import { VkTheme, VkThemeCssVars, VkThemeDescription } from '../../namespaces/vk';
+export interface ThemeVkBase extends VkTheme {
 }
-export interface ThemeVkBaseDescription extends ThemeDescription {
+export interface ThemeVkBaseDescription extends VkThemeDescription {
 }
-export interface ThemeVkBaseCssVars extends ThemeCssVars {
+export interface ThemeVkBaseCssVars extends VkThemeCssVars {
 }

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

@@ -1,7 +1,7 @@
-import { Theme, ThemeCssVars, ThemeDescription } from '../../general';
-export interface ThemeVkBaseDark extends Theme {
+import { VkTheme, VkThemeCssVars, VkThemeDescription } from '../../namespaces/vk';
+export interface ThemeVkBaseDark extends VkTheme {
 }
-export interface ThemeVkBaseDarkDescription extends ThemeDescription {
+export interface ThemeVkBaseDarkDescription extends VkThemeDescription {
 }
-export interface ThemeVkBaseDarkCssVars extends ThemeCssVars {
+export interface ThemeVkBaseDarkCssVars extends VkThemeCssVars {
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui-tokens",
-  "version": "4.30.0",
+  "version": "4.30.1-dev-ff0eeb.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",

package/themeDescriptions/base/vk.d.ts

@@ -1,11 +1,16 @@
-import { ColorsDescription, ThemeDescription } from '../../interfaces/general';
+import { bright_light, space_gray } from '@vkontakte/appearance/main.valette/scheme.json';
+import { vkcom_dark, vkcom_light } from '@vkontakte/appearance/main.valette/scheme_web.json';
+import { ColorsDescription } from '../../interfaces/general';
 import { Elevation } from '../../interfaces/general/elevation';
 import { Gradients } from '../../interfaces/general/gradients';
+import { LocalVkColorsDescriptionStruct, VkGradients, VkThemeDescription } from '../../interfaces/namespaces/vk';
+export declare const vkLocalColors: (theme: typeof bright_light | typeof space_gray | typeof vkcom_light | typeof vkcom_dark, palette?: Record<string, string>) => LocalVkColorsDescriptionStruct;
 export declare const lightColors: ColorsDescription;
 export declare const lightGradient: Gradients;
 export declare const lightElevation: Elevation;
 export declare const darkColors: ColorsDescription;
 export declare const darkGradient: Gradients;
 export declare const darkElevation: Elevation;
-export declare const lightTheme: ThemeDescription;
-export declare const darkTheme: ThemeDescription;
+export declare const gradients: VkGradients;
+export declare const lightTheme: VkThemeDescription;
+export declare const darkTheme: VkThemeDescription;

package/themeDescriptions/base/vk.js

@@ -10,10 +10,38 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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.darkElevation = exports.darkGradient = exports.darkColors = exports.lightElevation = exports.lightGradient = exports.lightColors = void 0;
+exports.darkTheme = exports.lightTheme = exports.gradients = exports.darkElevation = exports.darkGradient = exports.darkColors = exports.lightElevation = exports.lightGradient = exports.lightColors = exports.vkLocalColors = void 0;
+var palette_json_1 = __importDefault(require("@vkontakte/appearance/main.valette/palette.json"));
+var scheme_json_1 = require("@vkontakte/appearance/main.valette/scheme.json");
+var appearance_1 = require("../../build/helpers/appearance");
 var getGradientPointsFromColor_1 = require("../../build/helpers/getGradientPointsFromColor");
 var tokenHelpers_1 = require("../../build/helpers/tokenHelpers");
+var vkLocalColors = function (theme, palette) {
+    if (palette === void 0) { palette = palette_json_1.default; }
+    var resolve = function (clusterData) { return (0, appearance_1.resolveColor)(clusterData, palette); };
+    return {
+        colorSnippetBorderAlpha: resolve(theme.colors.snippet_border),
+        colorModalCardBorderAlpha: resolve(theme.colors.modal_card_border),
+        colorLandingSnippetBorderAlpha: resolve(theme.colors.landing_snippet_border),
+        colorActionSheetSeparatorAlpha: resolve(theme.colors.action_sheet_separator),
+        colorInputBorder: resolve(theme.colors.input_border),
+        colorImForwardLineAlpha: resolve(theme.colors.im_forward_line_tint),
+        colorImBubbleBorderAlternateHighlightedAlpha: resolve(theme.colors.im_bubble_border_alternate_highlighted),
+        colorImBubbleIncoming: resolve(theme.colors.im_bubble_incoming),
+        colorImBubbleIncomingAlternate: resolve(theme.colors.im_bubble_incoming_alternate),
+        colorImBubbleIncomingExpiring: resolve(theme.colors.im_bubble_incoming_expiring),
+        colorImBubbleOutgoing: resolve(theme.colors.im_bubble_outgoing),
+        colorImBubbleOutgoingExpiringHighlighted: resolve(theme.colors.im_bubble_outgoing_expiring_highlighted),
+        colorImBubbleGiftText: resolve(theme.colors.im_bubble_gift_text),
+        colorImBubbleGiftTextSecondary: resolve(theme.colors.im_bubble_gift_text_secondary),
+        colorImTextName: resolve(theme.colors.im_text_name),
+    };
+};
+exports.vkLocalColors = vkLocalColors;
 var fontFamilyAccent = "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif";
 var fontFamilyBase = "-apple-system, system-ui, \"Helvetica Neue\", Roboto, sans-serif";
 var fontWeightAccent1 = 600;
@@ -279,7 +307,43 @@ exports.darkElevation = {
     elevation3: '0px 0px 2px rgba(0, 0, 0, 0.08), 0px 4px 16px rgba(0, 0, 0, 0.08)',
     elevation4: '0px 0px 8px rgba(0, 0, 0, 0.12), 0px 16px 16px rgba(0, 0, 0, 0.16)',
 };
-exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase', themeNameBase: 'vkBase' }, exports.lightColors), exports.lightGradient), exports.lightElevation), { 
+exports.gradients = {
+    gradientAquamarineBlue: '#7DF1FA, #2BB4D6',
+    gradientBlue: '#66CCFF, #3F8AE0',
+    gradientCandy: '#FF99CC, #E52E6A',
+    gradientCrimson: '#FF7373, #E53949, #BF1C38',
+    gradientDisco: '#FFB726, #FF2693, #8122E0, #2693FF',
+    gradientEmerald: '#00D948, #0D8046',
+    gradientGray: '#C1CAD6, #878F99',
+    gradientGreen: '#6CD97E, #12B312',
+    gradientLagoon: '#2BD9D9, #5C9CE6',
+    gradientLavender: '#928FFF, #4B47B2',
+    gradientMarine: '#2EE54D, #0D7EFF',
+    gradientMidnight: '#73D0FF, #3885E1, #0032A6',
+    gradientOrange: '#FFBF80, #E66B2E',
+    gradientPink: '#FF8880, #E62E6B',
+    gradientPurple: '#A393F5, #735CE6',
+    gradientRaspberryPink: '#FF80D5, #E645B1',
+    gradientRed: '#FF7583, #E62E40',
+    gradientRetrowave: '#30F2B1, #5967FF, #FF26A5',
+    gradientSunset: '#FFD24D, #F26549, #E62E6B',
+    gradientTurquoise: '#8AE6E6, #12B3B3',
+    gradientTwilight: '#FF4D87, #9F40FF, #3399FF',
+    gradientUnicorn: '#FF99CC, #A179F2, #5CA1E6',
+    gradientViolet: '#D3A6FF, #903FE0',
+    gradientYellow: '#FFC44D, #F07300',
+    gradientYellowBright: '#FFD54F, #E7A902',
+    gradientHalloweenOrange: '#CB1E3B, #F05C44, #FFA000',
+    gradientHalloweenViolet: '#FFA000, #CD4C4B, #792EC0',
+    gradientNewYear: '#BB64E4, #805BD7, #2866D5',
+    gradientFrost: '#4FA0FF, #016CEA',
+    gradientValentine: '#FF8A65, #F25383, #8F13DB',
+    gradientWarmValentine: '#F3386A, #FF819E',
+    gradientSberkot: '#9DF19D, #31C2A7, #21A19A, #107F8C',
+    gradientMable: '#D9F4FF, #D9F4FF',
+    gradientWomensDay: '#FF99CC, #E52E6A',
+};
+exports.lightTheme = __assign(__assign(__assign(__assign(__assign(__assign({ themeName: 'vkBase', themeNameBase: 'vkBase' }, exports.lightColors), { colors: __assign(__assign({}, exports.lightColors.colors), (0, exports.vkLocalColors)(scheme_json_1.bright_light)) }), exports.gradients), exports.lightGradient), exports.lightElevation), { 
     // Типографика
     fontFamilyAccent: fontFamilyAccent, fontFamilyBase: fontFamilyBase, fontWeightAccent1: fontWeightAccent1, fontWeightAccent2: fontWeightAccent2, fontWeightAccent3: fontWeightAccent3, fontWeightBase1: fontWeightBase1, fontWeightBase2: fontWeightBase2, fontWeightBase3: fontWeightBase3, fontTitle1: {
         regular: {
@@ -577,4 +641,4 @@ exports.lightTheme = __assign(__assign(__assign(__assign({ themeName: 'vkBase',
     }, 
     // Разное
     animationDurationL: '0.4s', animationDurationM: '0.2s', animationDurationS: '0.1s', animationEasingDefault: 'cubic-bezier(0.3, 0.3, 0.5, 1)', animationEasingPlatform: 'cubic-bezier(0.4, 0, 0.2, 1)', opacityDisable: 0.4, opacityDisableAccessibility: 0.64, zIndexModal: 99, zIndexPopout: 100 });
-exports.darkTheme = __assign(__assign(__assign(__assign(__assign({}, exports.lightTheme), exports.darkColors), exports.darkGradient), exports.darkElevation), { themeName: 'vkBaseDark', themeInheritsFrom: 'vkBase', colorsScheme: 'dark' });
+exports.darkTheme = __assign(__assign(__assign(__assign(__assign(__assign({}, exports.lightTheme), exports.darkColors), { colors: __assign(__assign({}, exports.darkColors.colors), (0, exports.vkLocalColors)(scheme_json_1.space_gray)) }), exports.darkGradient), exports.darkElevation), { themeName: 'vkBaseDark', themeInheritsFrom: 'vkBase', colorsScheme: 'dark' });

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

@@ -1,6 +1,40 @@
 :root {
 	--vkui--theme_name: 'vkBase';
 	--vkui--theme_name_base: 'vkBase';
+	--vkui--gradient_aquamarine_blue: #7DF1FA, #2BB4D6;
+	--vkui--gradient_blue: #66CCFF, #3F8AE0;
+	--vkui--gradient_candy: #FF99CC, #E52E6A;
+	--vkui--gradient_crimson: #FF7373, #E53949, #BF1C38;
+	--vkui--gradient_disco: #FFB726, #FF2693, #8122E0, #2693FF;
+	--vkui--gradient_emerald: #00D948, #0D8046;
+	--vkui--gradient_gray: #C1CAD6, #878F99;
+	--vkui--gradient_green: #6CD97E, #12B312;
+	--vkui--gradient_lagoon: #2BD9D9, #5C9CE6;
+	--vkui--gradient_lavender: #928FFF, #4B47B2;
+	--vkui--gradient_marine: #2EE54D, #0D7EFF;
+	--vkui--gradient_midnight: #73D0FF, #3885E1, #0032A6;
+	--vkui--gradient_orange: #FFBF80, #E66B2E;
+	--vkui--gradient_pink: #FF8880, #E62E6B;
+	--vkui--gradient_purple: #A393F5, #735CE6;
+	--vkui--gradient_raspberry_pink: #FF80D5, #E645B1;
+	--vkui--gradient_red: #FF7583, #E62E40;
+	--vkui--gradient_retrowave: #30F2B1, #5967FF, #FF26A5;
+	--vkui--gradient_sunset: #FFD24D, #F26549, #E62E6B;
+	--vkui--gradient_turquoise: #8AE6E6, #12B3B3;
+	--vkui--gradient_twilight: #FF4D87, #9F40FF, #3399FF;
+	--vkui--gradient_unicorn: #FF99CC, #A179F2, #5CA1E6;
+	--vkui--gradient_violet: #D3A6FF, #903FE0;
+	--vkui--gradient_yellow: #FFC44D, #F07300;
+	--vkui--gradient_yellow_bright: #FFD54F, #E7A902;
+	--vkui--gradient_halloween_orange: #CB1E3B, #F05C44, #FFA000;
+	--vkui--gradient_halloween_violet: #FFA000, #CD4C4B, #792EC0;
+	--vkui--gradient_new_year: #BB64E4, #805BD7, #2866D5;
+	--vkui--gradient_frost: #4FA0FF, #016CEA;
+	--vkui--gradient_valentine: #FF8A65, #F25383, #8F13DB;
+	--vkui--gradient_warm_valentine: #F3386A, #FF819E;
+	--vkui--gradient_sberkot: #9DF19D, #31C2A7, #21A19A, #107F8C;
+	--vkui--gradient_mable: #D9F4FF, #D9F4FF;
+	--vkui--gradient_womens_day: #FF99CC, #E52E6A;
 	--vkui--gradient_black: rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.014) 13%, rgba(0, 0, 0, 0.06) 27%, rgba(0, 0, 0, 0.316) 68%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.4) 100%;
 	--vkui--gradient_white: rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.036) 13%, rgba(255, 255, 255, 0.15) 27%, rgba(255, 255, 255, 0.79) 68%, rgba(255, 255, 255, 0.95) 84%, rgba(255, 255, 255, 1) 100%;
 	--vkui--gradient_tint: rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, 0.036) 13%, rgba(249, 249, 249, 0.15) 27%, rgba(249, 249, 249, 0.79) 68%, rgba(249, 249, 249, 0.95) 84%, rgba(249, 249, 249, 1) 100%;
@@ -454,6 +488,51 @@
 	--vkui--color_transparent: transparent;
 	--vkui--color_transparent--hover: rgba(0, 16, 61, 0.04);
 	--vkui--color_transparent--active: rgba(0, 16, 61, 0.08);
+	--vkui--color_snippet_border_alpha: rgba(0, 0, 0, 0.15);
+	--vkui--color_snippet_border_alpha--hover: rgba(0, 0, 0, 0.19);
+	--vkui--color_snippet_border_alpha--active: rgba(0, 0, 0, 0.23);
+	--vkui--color_modal_card_border_alpha: rgba(0, 0, 0, 0.00);
+	--vkui--color_modal_card_border_alpha--hover: rgba(0, 0, 0, 0.04);
+	--vkui--color_modal_card_border_alpha--active: rgba(0, 0, 0, 0.08);
+	--vkui--color_landing_snippet_border_alpha: rgba(0, 0, 0, 0.15);
+	--vkui--color_landing_snippet_border_alpha--hover: rgba(0, 0, 0, 0.19);
+	--vkui--color_landing_snippet_border_alpha--active: rgba(0, 0, 0, 0.23);
+	--vkui--color_action_sheet_separator_alpha: rgba(0, 0, 0, 0.12);
+	--vkui--color_action_sheet_separator_alpha--hover: rgba(0, 0, 0, 0.16);
+	--vkui--color_action_sheet_separator_alpha--active: rgba(0, 0, 0, 0.2);
+	--vkui--color_input_border: #E1E3E6;
+	--vkui--color_input_border--hover: #D8DBDF;
+	--vkui--color_input_border--active: #CFD2D8;
+	--vkui--color_im_forward_line_alpha: rgba(69, 103, 143, 0.24);
+	--vkui--color_im_forward_line_alpha--hover: rgba(69, 103, 143, 0.28);
+	--vkui--color_im_forward_line_alpha--active: rgba(69, 103, 143, 0.32);
+	--vkui--color_im_bubble_border_alternate_highlighted_alpha: #D7D8D9;
+	--vkui--color_im_bubble_border_alternate_highlighted_alpha--hover: #CED0D3;
+	--vkui--color_im_bubble_border_alternate_highlighted_alpha--active: #C6C8CD;
+	--vkui--color_im_bubble_incoming: #EBEDF0;
+	--vkui--color_im_bubble_incoming--hover: #E2E4E9;
+	--vkui--color_im_bubble_incoming--active: #D8DBE2;
+	--vkui--color_im_bubble_incoming_alternate: #FFFFFF;
+	--vkui--color_im_bubble_incoming_alternate--hover: #F5F5F7;
+	--vkui--color_im_bubble_incoming_alternate--active: #EBECEF;
+	--vkui--color_im_bubble_incoming_expiring: #E6E9FF;
+	--vkui--color_im_bubble_incoming_expiring--hover: #DDE0F7;
+	--vkui--color_im_bubble_incoming_expiring--active: #D4D8EF;
+	--vkui--color_im_bubble_outgoing: #CCE4FF;
+	--vkui--color_im_bubble_outgoing--hover: #C4DCF7;
+	--vkui--color_im_bubble_outgoing--active: #BCD3EF;
+	--vkui--color_im_bubble_outgoing_expiring_highlighted: #ADB8FF;
+	--vkui--color_im_bubble_outgoing_expiring_highlighted--hover: #A6B1F7;
+	--vkui--color_im_bubble_outgoing_expiring_highlighted--active: #9FABEF;
+	--vkui--color_im_bubble_gift_text: #857250;
+	--vkui--color_im_bubble_gift_text--hover: #806E4F;
+	--vkui--color_im_bubble_gift_text--active: #7A6A4E;
+	--vkui--color_im_bubble_gift_text_secondary: #AB9871;
+	--vkui--color_im_bubble_gift_text_secondary--hover: #A4936F;
+	--vkui--color_im_bubble_gift_text_secondary--active: #9D8D6D;
+	--vkui--color_im_text_name: #2D81E0;
+	--vkui--color_im_text_name--hover: #2B7CD9;
+	--vkui--color_im_text_name--active: #2978D3;
 }
 
 .vkui--font_title1--regular {

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

@@ -1,6 +1,40 @@
 :root {
 	--vkui--theme_name: 'vkBase';
 	--vkui--theme_name_base: 'vkBase';
+	--vkui--gradient_aquamarine_blue: #7DF1FA, #2BB4D6;
+	--vkui--gradient_blue: #66CCFF, #3F8AE0;
+	--vkui--gradient_candy: #FF99CC, #E52E6A;
+	--vkui--gradient_crimson: #FF7373, #E53949, #BF1C38;
+	--vkui--gradient_disco: #FFB726, #FF2693, #8122E0, #2693FF;
+	--vkui--gradient_emerald: #00D948, #0D8046;
+	--vkui--gradient_gray: #C1CAD6, #878F99;
+	--vkui--gradient_green: #6CD97E, #12B312;
+	--vkui--gradient_lagoon: #2BD9D9, #5C9CE6;
+	--vkui--gradient_lavender: #928FFF, #4B47B2;
+	--vkui--gradient_marine: #2EE54D, #0D7EFF;
+	--vkui--gradient_midnight: #73D0FF, #3885E1, #0032A6;
+	--vkui--gradient_orange: #FFBF80, #E66B2E;
+	--vkui--gradient_pink: #FF8880, #E62E6B;
+	--vkui--gradient_purple: #A393F5, #735CE6;
+	--vkui--gradient_raspberry_pink: #FF80D5, #E645B1;
+	--vkui--gradient_red: #FF7583, #E62E40;
+	--vkui--gradient_retrowave: #30F2B1, #5967FF, #FF26A5;
+	--vkui--gradient_sunset: #FFD24D, #F26549, #E62E6B;
+	--vkui--gradient_turquoise: #8AE6E6, #12B3B3;
+	--vkui--gradient_twilight: #FF4D87, #9F40FF, #3399FF;
+	--vkui--gradient_unicorn: #FF99CC, #A179F2, #5CA1E6;
+	--vkui--gradient_violet: #D3A6FF, #903FE0;
+	--vkui--gradient_yellow: #FFC44D, #F07300;
+	--vkui--gradient_yellow_bright: #FFD54F, #E7A902;
+	--vkui--gradient_halloween_orange: #CB1E3B, #F05C44, #FFA000;
+	--vkui--gradient_halloween_violet: #FFA000, #CD4C4B, #792EC0;
+	--vkui--gradient_new_year: #BB64E4, #805BD7, #2866D5;
+	--vkui--gradient_frost: #4FA0FF, #016CEA;
+	--vkui--gradient_valentine: #FF8A65, #F25383, #8F13DB;
+	--vkui--gradient_warm_valentine: #F3386A, #FF819E;
+	--vkui--gradient_sberkot: #9DF19D, #31C2A7, #21A19A, #107F8C;
+	--vkui--gradient_mable: #D9F4FF, #D9F4FF;
+	--vkui--gradient_womens_day: #FF99CC, #E52E6A;
 	--vkui--gradient_black: rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.014) 13%, rgba(0, 0, 0, 0.06) 27%, rgba(0, 0, 0, 0.316) 68%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.4) 100%;
 	--vkui--gradient_white: rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.036) 13%, rgba(255, 255, 255, 0.15) 27%, rgba(255, 255, 255, 0.79) 68%, rgba(255, 255, 255, 0.95) 84%, rgba(255, 255, 255, 1) 100%;
 	--vkui--gradient_tint: rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, 0.036) 13%, rgba(249, 249, 249, 0.15) 27%, rgba(249, 249, 249, 0.79) 68%, rgba(249, 249, 249, 0.95) 84%, rgba(249, 249, 249, 1) 100%;

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

@@ -1,6 +1,40 @@
 :root {
 	--vkui--theme_name: 'vkBase';
 	--vkui--theme_name_base: 'vkBase';
+	--vkui--gradient_aquamarine_blue: #7DF1FA, #2BB4D6;
+	--vkui--gradient_blue: #66CCFF, #3F8AE0;
+	--vkui--gradient_candy: #FF99CC, #E52E6A;
+	--vkui--gradient_crimson: #FF7373, #E53949, #BF1C38;
+	--vkui--gradient_disco: #FFB726, #FF2693, #8122E0, #2693FF;
+	--vkui--gradient_emerald: #00D948, #0D8046;
+	--vkui--gradient_gray: #C1CAD6, #878F99;
+	--vkui--gradient_green: #6CD97E, #12B312;
+	--vkui--gradient_lagoon: #2BD9D9, #5C9CE6;
+	--vkui--gradient_lavender: #928FFF, #4B47B2;
+	--vkui--gradient_marine: #2EE54D, #0D7EFF;
+	--vkui--gradient_midnight: #73D0FF, #3885E1, #0032A6;
+	--vkui--gradient_orange: #FFBF80, #E66B2E;
+	--vkui--gradient_pink: #FF8880, #E62E6B;
+	--vkui--gradient_purple: #A393F5, #735CE6;
+	--vkui--gradient_raspberry_pink: #FF80D5, #E645B1;
+	--vkui--gradient_red: #FF7583, #E62E40;
+	--vkui--gradient_retrowave: #30F2B1, #5967FF, #FF26A5;
+	--vkui--gradient_sunset: #FFD24D, #F26549, #E62E6B;
+	--vkui--gradient_turquoise: #8AE6E6, #12B3B3;
+	--vkui--gradient_twilight: #FF4D87, #9F40FF, #3399FF;
+	--vkui--gradient_unicorn: #FF99CC, #A179F2, #5CA1E6;
+	--vkui--gradient_violet: #D3A6FF, #903FE0;
+	--vkui--gradient_yellow: #FFC44D, #F07300;
+	--vkui--gradient_yellow_bright: #FFD54F, #E7A902;
+	--vkui--gradient_halloween_orange: #CB1E3B, #F05C44, #FFA000;
+	--vkui--gradient_halloween_violet: #FFA000, #CD4C4B, #792EC0;
+	--vkui--gradient_new_year: #BB64E4, #805BD7, #2866D5;
+	--vkui--gradient_frost: #4FA0FF, #016CEA;
+	--vkui--gradient_valentine: #FF8A65, #F25383, #8F13DB;
+	--vkui--gradient_warm_valentine: #F3386A, #FF819E;
+	--vkui--gradient_sberkot: #9DF19D, #31C2A7, #21A19A, #107F8C;
+	--vkui--gradient_mable: #D9F4FF, #D9F4FF;
+	--vkui--gradient_womens_day: #FF99CC, #E52E6A;
 	--vkui--gradient_black: rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.014) 13%, rgba(0, 0, 0, 0.06) 27%, rgba(0, 0, 0, 0.316) 68%, rgba(0, 0, 0, 0.38) 84%, rgba(0, 0, 0, 0.4) 100%;
 	--vkui--gradient_white: rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.036) 13%, rgba(255, 255, 255, 0.15) 27%, rgba(255, 255, 255, 0.79) 68%, rgba(255, 255, 255, 0.95) 84%, rgba(255, 255, 255, 1) 100%;
 	--vkui--gradient_tint: rgba(249, 249, 249, 0) 0%, rgba(249, 249, 249, 0.036) 13%, rgba(249, 249, 249, 0.15) 27%, rgba(249, 249, 249, 0.79) 68%, rgba(249, 249, 249, 0.95) 84%, rgba(249, 249, 249, 1) 100%;
@@ -289,4 +323,49 @@
 	--vkui--color_transparent: transparent;
 	--vkui--color_transparent--hover: rgba(0, 16, 61, 0.04);
 	--vkui--color_transparent--active: rgba(0, 16, 61, 0.08);
+	--vkui--color_snippet_border_alpha: rgba(0, 0, 0, 0.15);
+	--vkui--color_snippet_border_alpha--hover: rgba(0, 0, 0, 0.19);
+	--vkui--color_snippet_border_alpha--active: rgba(0, 0, 0, 0.23);
+	--vkui--color_modal_card_border_alpha: rgba(0, 0, 0, 0.00);
+	--vkui--color_modal_card_border_alpha--hover: rgba(0, 0, 0, 0.04);
+	--vkui--color_modal_card_border_alpha--active: rgba(0, 0, 0, 0.08);
+	--vkui--color_landing_snippet_border_alpha: rgba(0, 0, 0, 0.15);
+	--vkui--color_landing_snippet_border_alpha--hover: rgba(0, 0, 0, 0.19);
+	--vkui--color_landing_snippet_border_alpha--active: rgba(0, 0, 0, 0.23);
+	--vkui--color_action_sheet_separator_alpha: rgba(0, 0, 0, 0.12);
+	--vkui--color_action_sheet_separator_alpha--hover: rgba(0, 0, 0, 0.16);
+	--vkui--color_action_sheet_separator_alpha--active: rgba(0, 0, 0, 0.2);
+	--vkui--color_input_border: #E1E3E6;
+	--vkui--color_input_border--hover: #D8DBDF;
+	--vkui--color_input_border--active: #CFD2D8;
+	--vkui--color_im_forward_line_alpha: rgba(69, 103, 143, 0.24);
+	--vkui--color_im_forward_line_alpha--hover: rgba(69, 103, 143, 0.28);
+	--vkui--color_im_forward_line_alpha--active: rgba(69, 103, 143, 0.32);
+	--vkui--color_im_bubble_border_alternate_highlighted_alpha: #D7D8D9;
+	--vkui--color_im_bubble_border_alternate_highlighted_alpha--hover: #CED0D3;
+	--vkui--color_im_bubble_border_alternate_highlighted_alpha--active: #C6C8CD;
+	--vkui--color_im_bubble_incoming: #EBEDF0;
+	--vkui--color_im_bubble_incoming--hover: #E2E4E9;
+	--vkui--color_im_bubble_incoming--active: #D8DBE2;
+	--vkui--color_im_bubble_incoming_alternate: #FFFFFF;
+	--vkui--color_im_bubble_incoming_alternate--hover: #F5F5F7;
+	--vkui--color_im_bubble_incoming_alternate--active: #EBECEF;
+	--vkui--color_im_bubble_incoming_expiring: #E6E9FF;
+	--vkui--color_im_bubble_incoming_expiring--hover: #DDE0F7;
+	--vkui--color_im_bubble_incoming_expiring--active: #D4D8EF;
+	--vkui--color_im_bubble_outgoing: #CCE4FF;
+	--vkui--color_im_bubble_outgoing--hover: #C4DCF7;
+	--vkui--color_im_bubble_outgoing--active: #BCD3EF;
+	--vkui--color_im_bubble_outgoing_expiring_highlighted: #ADB8FF;
+	--vkui--color_im_bubble_outgoing_expiring_highlighted--hover: #A6B1F7;
+	--vkui--color_im_bubble_outgoing_expiring_highlighted--active: #9FABEF;
+	--vkui--color_im_bubble_gift_text: #857250;
+	--vkui--color_im_bubble_gift_text--hover: #806E4F;
+	--vkui--color_im_bubble_gift_text--active: #7A6A4E;
+	--vkui--color_im_bubble_gift_text_secondary: #AB9871;
+	--vkui--color_im_bubble_gift_text_secondary--hover: #A4936F;
+	--vkui--color_im_bubble_gift_text_secondary--active: #9D8D6D;
+	--vkui--color_im_text_name: #2D81E0;
+	--vkui--color_im_text_name--hover: #2B7CD9;
+	--vkui--color_im_text_name--active: #2978D3;
 }