@vkontakte/vkui-tokens 4.38.2 → 4.39.0

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

@@ -3,11 +3,13 @@ export interface Gradients {
     /**
      * @desc Параметры градиента черного цвета
      * @tags gradient
+     * @deprecated используйте gradient или gradientTint
      */
     gradientBlack: GradientPoints;
     /**
      * @desc Параметры градиента белого цвета
      * @tags gradient
+     * @deprecated используйте gradient или gradientTint
      */
     gradientWhite: GradientPoints;
     /**
@@ -15,4 +17,9 @@ export interface Gradients {
      * @tags gradient
      */
     gradientTint: GradientPoints;
+    /**
+     * @desc Параметры градиента дефолтного цвета
+     * @tags gradient
+     */
+    gradient: GradientPoints;
 }

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

@@ -0,0 +1,20 @@
+import { ThemeCssVars } from '../../general';
+import { ColorDescription, ColorWithStates } from '../../general/colors';
+import { ParadigmTheme, ParadigmThemeDescription } from '../../namespaces/paradigm';
+export interface LocalWorkspaceLandingsColorDescriptionStruct {
+    workspaceLandingsColorBackgroundDark1: ColorDescription;
+    workspaceLandingsColorBackgroundDark2: ColorDescription;
+    workspaceLandingsColorBackgroundBlue: ColorDescription;
+    workspaceLandingsColorTextGray: ColorDescription;
+    workspaceLandingsColorTextGreen: ColorDescription;
+}
+export type WorkspaceLandingsLocalColors = {
+    [key in keyof LocalWorkspaceLandingsColorDescriptionStruct]: ColorWithStates;
+};
+export interface ThemeWorkspaceLandings extends ParadigmTheme, WorkspaceLandingsLocalColors {
+}
+export interface ThemeWorkspaceLandingsDescription extends ParadigmThemeDescription {
+    colors: LocalWorkspaceLandingsColorDescriptionStruct & ParadigmThemeDescription['colors'];
+}
+export interface ThemeWorkspaceLandingsCssVars extends ThemeCssVars<ThemeWorkspaceLandings, 'breakpoints'> {
+}

package/interfaces/themes/workspaceLandings/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.38.2",
+  "version": "4.39.0",
   "description": "Репозиторий, который содержит в себе дизайн-токены и другие инструменты объединенной дизайн-системы VKUI и Paradigm",
   "license": "MIT",
   "main": "utils/descriptions.js",

package/themeDescriptions/base/paradigm.js

@@ -27,6 +27,7 @@ var fontWeightBase2 = 700;
 var fontWeightBase3 = 400;
 var colorBackgroundTertiaryLight = '#F6F7F8';
 var colorBackgroundTertiaryDark = '#252525';
+var colorBackgroundContentDark = '#232324';
 exports.lightColors = {
     colorsScheme: 'light',
     colors: {
@@ -158,7 +159,7 @@ exports.darkColors = {
         colorBackgroundAccent: '#2775FC',
         colorBackgroundAccentThemed: '#FFFFFF',
         colorBackgroundAccentAlternative: '#FF9E00',
-        colorBackgroundContent: '#232324',
+        colorBackgroundContent: colorBackgroundContentDark,
         colorBackgroundSecondary: '#2A2A2B',
         colorBackgroundSecondaryAlpha: {
             normal: 'rgba(255, 255, 255, 0.08)',
@@ -596,7 +597,7 @@ exports.lightThemeBase = __assign(__assign({ themeName: 'paradigmBase' }, export
     // Стандартные токены для отступов
     spacingSizeXs: 4, spacingSizeS: 6, spacingSizeM: 8, spacingSizeL: 10, spacingSizeXl: 12, 
     // Прочие отступы
-    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 });
+    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), gradient: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'), 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)',
@@ -776,7 +777,7 @@ exports.darkThemeElevation = {
     elevation3: '0 4px 32px 0 rgba(0, 0, 0, 0.48)',
     elevation4: '0 4px 32px 0 rgba(0, 0, 0, 0.48)',
 };
-exports.darkThemeBase = __assign(__assign(__assign(__assign({}, exports.lightThemeBase), { gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundTertiaryDark), themeName: 'paradigmBaseDark' }), exports.darkColors), exports.darkThemeElevation);
+exports.darkThemeBase = __assign(__assign(__assign(__assign({}, exports.lightThemeBase), { gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundTertiaryDark), gradient: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundContentDark, 0.4), themeName: 'paradigmBaseDark' }), exports.darkColors), exports.darkThemeElevation);
 exports.darkTheme = __assign(__assign(__assign(__assign({}, exports.lightTheme), exports.darkThemeBase), exports.darkThemeElevation), { colorsScheme: 'dark', colors: __assign(__assign(__assign({}, exports.lightTheme.colors), exports.darkThemeBase.colors), { colorButtonContrastAlpha: {
             normal: 'rgba(255, 255, 255, 0.12)',
             hover: 'rgba(255, 255, 255, 0.2)',

package/themeDescriptions/base/vk.js

@@ -27,8 +27,6 @@ var fontWeightAccent3 = 400;
 var fontWeightBase1 = 600;
 var fontWeightBase2 = 500;
 var fontWeightBase3 = 400;
-var colorBackgroundTertiaryLight = '#F9F9F9';
-var colorBackgroundTertiaryDark = '#202021';
 // eslint-disable-next-line max-lines-per-function
 var colorFromFigma = function (colorsScheme) {
     var _a = vk_json_1.default[colorsScheme], background = _a.background, text = _a.text, icons = _a.icons, stroke = _a.stroke, palette = _a.palette, other = _a.other;
@@ -224,7 +222,8 @@ exports.lightColors = (0, exports.colorFromFigma)('light');
 exports.lightGradient = {
     gradientBlack: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#000000', 0.4),
     gradientWhite: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'),
-    gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundTertiaryLight),
+    gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(vk_json_1.default.light.background.background_tertiary),
+    gradient: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'),
 };
 exports.lightElevation = {
     elevation1: '0px 0px 2px rgba(0, 0, 0, 0.03), 0px 2px 2px rgba(0, 0, 0, 0.06)',
@@ -237,7 +236,8 @@ exports.darkColors = (0, exports.colorFromFigma)('dark');
 exports.darkGradient = {
     gradientBlack: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#000000', 0.4),
     gradientWhite: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)('#FFFFFF'),
-    gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(colorBackgroundTertiaryDark),
+    gradientTint: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(vk_json_1.default.dark.background.background_tertiary),
+    gradient: (0, getGradientPointsFromColor_1.getGradientPointsFromColor)(vk_json_1.default.dark.background.background_content, 0.4),
 };
 exports.darkElevation = {
     // TODO: Тени (Поправить для Dark)

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

@@ -246,6 +246,7 @@
 	--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(246, 247, 248, 0) 0%, rgba(246, 247, 248, 0.036) 13%, rgba(246, 247, 248, 0.15) 27%, rgba(246, 247, 248, 0.79) 68%, rgba(246, 247, 248, 0.95) 84%, rgba(246, 247, 248, 1) 100%;
+	--vkui--gradient: 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--animation_duration_l: 0.4s;
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;

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

@@ -246,6 +246,7 @@
 	--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(246, 247, 248, 0) 0%, rgba(246, 247, 248, 0.036) 13%, rgba(246, 247, 248, 0.15) 27%, rgba(246, 247, 248, 0.79) 68%, rgba(246, 247, 248, 0.95) 84%, rgba(246, 247, 248, 1) 100%;
+	--vkui--gradient: 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--animation_duration_l: 0.4s;
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;

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

@@ -13,6 +13,7 @@
 	--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(246, 247, 248, 0) 0%, rgba(246, 247, 248, 0.036) 13%, rgba(246, 247, 248, 0.15) 27%, rgba(246, 247, 248, 0.79) 68%, rgba(246, 247, 248, 0.95) 84%, rgba(246, 247, 248, 1) 100%;
+	--vkui--gradient: 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--animation_duration_l: 0.4s;
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;

package/themes/calendar/cssVars/declarations/onlyVariables.css

@@ -246,6 +246,7 @@
 	--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(246, 247, 248, 0) 0%, rgba(246, 247, 248, 0.036) 13%, rgba(246, 247, 248, 0.15) 27%, rgba(246, 247, 248, 0.79) 68%, rgba(246, 247, 248, 0.95) 84%, rgba(246, 247, 248, 1) 100%;
+	--vkui--gradient: 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--animation_duration_l: 0.4s;
 	--vkui--animation_duration_m: 0.2s;
 	--vkui--animation_duration_s: 0.1s;