Merge pull request #592 from VKCOM/4.39.0

4.39.0

CONTRIBUTING.md

@@ -107,3 +107,4 @@ git config --local blame.ignoreRevsFile .git-blame-ignore-revs
   - pulse
     - pulseDark
   - workspaceAdmin
+  - workspaceLandings

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",

src/interfaces/general/gradients/index.ts

@@ -4,18 +4,27 @@ export interface Gradients {
 	/**
 	 * @desc Параметры градиента черного цвета
 	 * @tags gradient
+	 * @deprecated используйте gradient или gradientTint
 	 */
+	// TODO [>=5]: удалить за ненадобностью
 	gradientBlack: GradientPoints;
 
 	/**
 	 * @desc Параметры градиента белого цвета
 	 * @tags gradient
+	 * @deprecated используйте gradient или gradientTint
 	 */
+	// TODO [>=5]: удалить за ненадобностью
 	gradientWhite: GradientPoints;
 
 	/**
 	 * @desc Параметры градиента нейтрального цвета
 	 * @tags gradient
 	 */
 	gradientTint: GradientPoints;
+	/**
+	 * @desc Параметры градиента дефолтного цвета
+	 * @tags gradient
+	 */
+	gradient: GradientPoints;
 }

src/interfaces/themes/workspaceLandings/index.ts

@@ -0,0 +1,24 @@
+import { ThemeCssVars } from '@/interfaces/general';
+import { ColorDescription, ColorWithStates } from '@/interfaces/general/colors';
+import { ParadigmTheme, ParadigmThemeDescription } from '@/interfaces/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'> {}

src/themeDescriptions/base/paradigm.ts

@@ -20,6 +20,7 @@ const fontWeightBase3 = 400;
 
 const colorBackgroundTertiaryLight: Property.Color = '#F6F7F8';
 const colorBackgroundTertiaryDark: Property.Color = '#252525';
+const colorBackgroundContentDark: Property.Color = '#232324';
 
 export const lightColors: ColorsDescription = {
 	colorsScheme: 'light',
@@ -158,7 +159,7 @@ export const darkColors: ColorsDescription = {
 		colorBackgroundAccent: '#2775FC',
 		colorBackgroundAccentThemed: '#FFFFFF',
 		colorBackgroundAccentAlternative: '#FF9E00',
-		colorBackgroundContent: '#232324',
+		colorBackgroundContent: colorBackgroundContentDark,
 		colorBackgroundSecondary: '#2A2A2B',
 		colorBackgroundSecondaryAlpha: {
 			normal: 'rgba(255, 255, 255, 0.08)',
@@ -711,6 +712,7 @@ export const lightThemeBase: ThemeDescription = {
 	gradientBlack: getGradientPointsFromColor('#000000', 0.4),
 	gradientWhite: getGradientPointsFromColor('#FFFFFF'),
 	gradientTint: getGradientPointsFromColor(colorBackgroundTertiaryLight),
+	gradient: getGradientPointsFromColor('#FFFFFF'),
 	animationDurationL: '0.4s',
 	animationDurationM: '0.2s',
 	animationDurationS: '0.1s',
@@ -1001,6 +1003,7 @@ export const darkThemeElevation: Elevation = {
 export const darkThemeBase: ThemeDescription = {
 	...lightThemeBase,
 	gradientTint: getGradientPointsFromColor(colorBackgroundTertiaryDark),
+	gradient: getGradientPointsFromColor(colorBackgroundContentDark, 0.4),
 	themeName: 'paradigmBaseDark',
 	...darkColors,
 	...darkThemeElevation,

src/themeDescriptions/base/vk.ts

@@ -1,5 +1,3 @@
-import type { Property } from 'csstype';
-
 import { getGradientPointsFromColor } from '@/build/helpers/getGradientPointsFromColor';
 import { alias } from '@/build/helpers/tokenHelpers';
 import { ColorsDescription, ThemeDescription } from '@/interfaces/general';
@@ -17,9 +15,6 @@ const fontWeightBase1 = 600;
 const fontWeightBase2 = 500;
 const fontWeightBase3 = 400;
 
-const colorBackgroundTertiaryLight: Property.Color = '#F9F9F9';
-const colorBackgroundTertiaryDark: Property.Color = '#202021';
-
 // eslint-disable-next-line max-lines-per-function
 export const colorFromFigma = (colorsScheme: 'light' | 'dark'): ColorsDescription => {
 	const { background, text, icons, stroke, palette, other } = figma[colorsScheme];
@@ -225,7 +220,8 @@ export const lightColors: ColorsDescription = colorFromFigma('light');
 export const lightGradient: Gradients = {
 	gradientBlack: getGradientPointsFromColor('#000000', 0.4),
 	gradientWhite: getGradientPointsFromColor('#FFFFFF'),
-	gradientTint: getGradientPointsFromColor(colorBackgroundTertiaryLight),
+	gradientTint: getGradientPointsFromColor(figma.light.background.background_tertiary),
+	gradient: getGradientPointsFromColor('#FFFFFF'),
 };
 
 export const lightElevation: Elevation = {
@@ -241,7 +237,8 @@ export const darkColors: ColorsDescription = colorFromFigma('dark');
 export const darkGradient: Gradients = {
 	gradientBlack: getGradientPointsFromColor('#000000', 0.4),
 	gradientWhite: getGradientPointsFromColor('#FFFFFF'),
-	gradientTint: getGradientPointsFromColor(colorBackgroundTertiaryDark),
+	gradientTint: getGradientPointsFromColor(figma.dark.background.background_tertiary),
+	gradient: getGradientPointsFromColor(figma.dark.background.background_content, 0.4),
 };
 
 export const darkElevation: Elevation = {

src/themeDescriptions/index.ts

@@ -30,6 +30,7 @@ import {
 import { vkontakteComTheme, vkontakteComThemeDark } from '@/themeDescriptions/themes/vkontakteCom';
 import { vkontakteIOSTheme, vkontakteIOSThemeDark } from '@/themeDescriptions/themes/vkontakteIOS';
 import { workspaceAdminTheme } from '@/themeDescriptions/themes/workspaceAdmin';
+import { workspaceLandingsTheme } from '@/themeDescriptions/themes/workspaceLandings';
 
 import { darkThemeExport as paradigmBaseDark, lightTheme as paradigmBase } from './base/paradigm';
 import { darkTheme as vkBaseDark, lightTheme as vkBase } from './base/vk';
@@ -96,6 +97,9 @@ export const themes = [
 	// Темы, наследуемые от WorkspaceAdmin
 	workspaceAdminTheme,
 
+	// Темы, наследуемые от WorkspaceLandings
+	workspaceLandingsTheme,
+
 	// Прочие темы
 	callsTheme,
 	todoTheme,

src/themeDescriptions/themes/workspaceLandings/index.ts

@@ -0,0 +1,16 @@
+import { ThemeWorkspaceLandingsDescription } from '@/interfaces/themes/workspaceLandings';
+import { darkTheme } from '@/themeDescriptions/base/paradigm';
+
+export const workspaceLandingsTheme: ThemeWorkspaceLandingsDescription = {
+	...darkTheme,
+	themeName: 'workspaceLandings',
+	themeNameBase: 'workspaceLandings',
+	colors: {
+		...darkTheme.colors,
+		workspaceLandingsColorBackgroundDark1: '#090909',
+		workspaceLandingsColorBackgroundDark2: '#1D1D1F',
+		workspaceLandingsColorBackgroundBlue: '#2688EB',
+		workspaceLandingsColorTextGray: '#B3B3B4',
+		workspaceLandingsColorTextGreen: '#00D3E6',
+	},
+};