Add dobro theme

src/interfaces/themes/dobro/index.ts

@@ -0,0 +1,53 @@
+import type { Theme, ThemeCssVars, ThemeDescription } from '@/interfaces/general';
+import type { Adaptive } from '@/interfaces/general/tools';
+import type { Fonts, TypographyBaseProps } from '@/interfaces/general/typography';
+
+export interface ThemeDobro
+	extends Theme,
+	ThemeDobroMedia,
+	ThemeDobroCustomTokens,
+	ThemeDobroFonts { }
+
+export interface ThemeDobroDescription
+	extends ThemeDescription,
+	ThemeDobroMedia,
+	ThemeDobroCustomTokens,
+	ThemeDobroFonts { }
+
+export interface ThemeDobroCssVars extends ThemeCssVars<ThemeDobro> { }
+
+interface ThemeDobroCustomTokens {
+	dobroPortalZIndex: number;
+	dobroPopoutZIndex: number;
+	dobroModalZIndex: number;
+	dobroMenuZIndex: number;
+}
+
+export interface ThemeDobroFonts {
+	dobroFontFamily600: string;
+	dobroFontFamily500: string;
+	dobroFontFamily400: string;
+}
+
+export interface ThemeDobroMedia {
+	dobroLayoutWidthToMobileS: string;
+	dobroLayoutWidthMobileM: string;
+	dobroLayoutWidthToMobileM: string;
+	dobroLayoutWidthMobileL: string;
+	dobroLayoutWidthToMobile: string;
+	dobroLayoutWidthFromTablet: string;
+	dobroLayoutWidthTablet: string;
+	dobroLayoutWidthToTablet: string;
+	dobroLayoutWidthFromDesktopS: string;
+	dobroLayoutWidthDesktopS: string;
+	dobroLayoutWidthToDesktopS: string;
+	dobroLayoutWidthDesktopM: string;
+}
+
+export type BaseFonts = Omit<
+	{
+		[key in keyof Fonts]: Adaptive<Fonts[key]>;
+	},
+	'fontHeadline'
+> &
+	TypographyBaseProps;

src/interfaces/themes/dobroDark/index.ts

@@ -0,0 +1,5 @@
+import type { ThemeDobro, ThemeDobroCssVars, ThemeDobroDescription } from '../dobro';
+
+export type ThemeDobroDark = ThemeDobro;
+export type ThemeDobroDarkDescription = ThemeDobroDescription;
+export type ThemeDobroDarkCssVars = ThemeDobroCssVars;

src/themeDescriptions/index.ts

@@ -1,6 +1,7 @@
 import { calendarDarkTheme, calendarTheme } from '@/themeDescriptions/themes/calendar';
 import { callsTheme } from '@/themeDescriptions/themes/calls';
 import { cloudDarkTheme, cloudTheme } from '@/themeDescriptions/themes/cloud';
+import { dobroDarkTheme, dobroTheme } from '@/themeDescriptions/themes/dobro';
 import { homeDarkTheme, homeTheme } from '@/themeDescriptions/themes/home';
 import { mediaDarkTheme, mediaTheme } from '@/themeDescriptions/themes/media';
 import { mycomTheme } from '@/themeDescriptions/themes/mycom';
@@ -86,6 +87,10 @@ export const themes = [
 	cloudTheme,
 	cloudDarkTheme,
 
+	// Темы, наследуемые от Dobro
+	dobroTheme,
+	dobroDarkTheme,
+
 	// Темы, наследуемые от PortalUI
 	portalUITheme,
 	portalUIDarkTheme,

src/themeDescriptions/themes/dobro/index.ts

@@ -0,0 +1,54 @@
+import type { ColorsDescription } from '@/interfaces/general';
+import type { ThemeDobroDescription } from '@/interfaces/themes/dobro';
+import {
+	colorFromFigma,
+	darkElevation,
+	darkGradient,
+	fonts,
+	lightTheme,
+} from '@/themeDescriptions/base/vk';
+
+const lightColors: ColorsDescription = colorFromFigma('light');
+
+const darkColors: ColorsDescription = colorFromFigma('dark');
+
+export const dobroTheme: ThemeDobroDescription = {
+	...lightTheme,
+	...lightColors,
+	...fonts,
+
+	themeName: 'dobro',
+	themeNameBase: 'dobro',
+
+	dobroFontFamily600: 'VK Sans Display, sans-serif, Arial',
+	dobroFontFamily500: 'VK Sans Display Medium, sans-serif, Arial',
+	dobroFontFamily400: 'VK Sans Display Regular, sans-serif, Arial',
+
+	dobroPortalZIndex: 96,
+	dobroPopoutZIndex: 96,
+	dobroModalZIndex: 97,
+	dobroMenuZIndex: 98,
+
+	dobroLayoutWidthToMobileS: '(max-width: 499px)',
+	dobroLayoutWidthMobileM: '(min-width: 500px) and (max-width: 637px)',
+	dobroLayoutWidthToMobileM: '(max-width: 638px)',
+	dobroLayoutWidthMobileL: '(min-width: 639px) and (max-width: 767px)',
+	dobroLayoutWidthToMobile: '(max-width: 767px)',
+	dobroLayoutWidthFromTablet: '(min-width: 768px)',
+	dobroLayoutWidthTablet: '(min-width: 768px) and (max-width: 1003px)',
+	dobroLayoutWidthToTablet: '(max-width: 1003px)',
+	dobroLayoutWidthFromDesktopS: '(min-width: 1004px)',
+	dobroLayoutWidthDesktopS: '(min-width: 1004px) and (max-width: 1244px)',
+	dobroLayoutWidthToDesktopS: '(max-width: 1244px)',
+	dobroLayoutWidthDesktopM: '(min-width: 1245px)',
+};
+
+export const dobroDarkTheme: ThemeDobroDescription = {
+	...dobroTheme,
+	...darkColors,
+	...darkGradient,
+	...darkElevation,
+	themeName: 'dobroDark',
+	themeInheritsFrom: 'dobro',
+	colorsScheme: 'dark',
+};