Merge pull request #562 from Zaycevq/tokens-(clone-master)

new Tokens (clone master + andres)
VKCOM · Aug 9, 2023 · 70dc60f · 70dc60f
2 parents 12895eb + 8b73b96
commit 70dc60f
Show file tree

Hide file tree

Showing 10 changed files with 15,257 additions and 58 deletions.
diff --git a/src/build/__snapshots__/snapthots.test.ts.snap b/src/build/__snapshots__/snapthots.test.ts.snap
diff --git a/src/interfaces/general/colors/index.ts b/src/interfaces/general/colors/index.ts
@@ -268,6 +268,12 @@ export interface ColorsDescriptionStruct {
 	 */
 	colorLinkContrast: ColorDescription;
 
+	/**
+	 * @desc Цвет текста для кнопок
+	 * @tags color
+	 */
+	colorTextButton: ColorDescription;
+
 	// Icons
 	/**
 	 * @desc Акцентный цвет иконок
@@ -359,6 +365,12 @@ export interface ColorsDescriptionStruct {
 	 */
 	colorIconNegative: ColorDescription;
 
+	/**
+	 * @desc Цвет иконок для кнопок
+	 * @tags color, icon
+	 */
+	colorIconButton: ColorDescription;
+
 	// Stroke
 	/**
 	 * @desc Цвет акцентной обводки
@@ -432,6 +444,12 @@ export interface ColorsDescriptionStruct {
 	 */
 	colorSeparatorPrimary3x: ColorDescription;
 
+	/**
+	 * @desc Цвет обводки для кнопок
+	 * @tags color, stroke
+	 */
+	colorStrokeButton: ColorDescription;
+
 	// Palette
 	/**
 	 * @desc Палитра цветов. Голубой цвет
@@ -500,6 +518,12 @@ export interface ColorsDescriptionStruct {
 	 */
 	colorOverlayPrimary: ColorDescription;
 
+	/**
+	 * @desc Вторичный цвет для подложек оверлеев
+	 * @tags color, overlay
+	 */
+	colorOverlaySecondary: ColorDescription;
+
 	/**
 	 * @desc Фон для компонента Avatar. Не прозрачный
 	 * @tags color, component
@@ -602,6 +626,12 @@ export interface ColorsDescriptionStruct {
 	 */
 	colorSegmentedControl: ColorDescription;
 
+	/**
+	 * @desc Цвет текста для неактивного таба в таббаре
+	 * @tags color, component, background
+	 */
+	colorTabbarTextInactive: ColorDescription;
+
 	// Themed цвета, в тёмной теме становится белыми
 }
 

diff --git a/src/interfaces/general/geometry/index.ts b/src/interfaces/general/geometry/index.ts
@@ -47,6 +47,12 @@ export interface Sizes {
 	 */
 	sizeBorderRadius: number;
 
+	/**
+	 * @desc Значение радиуса закругления для круглых кнопок
+	 * @tags size, stroke
+	 */
+	sizeBorderRadiusRounded: number;
+
 	/**
 	 * @desc Legacy
 	 * @tags size, legacy

diff --git a/src/interfaces/themes/vkontakteAndroid/index.ts b/src/interfaces/themes/vkontakteAndroid/index.ts
@@ -184,10 +184,78 @@ export interface VkontakteAndroidGradients {
 
 export interface LocalVkontakteAndroidColorsDescriptionStruct {
 	vkontakteColorSnippetBorderAlpha: ColorDescription;
+	vkontakteColorSnippetBackground: ColorDescription;
 	vkontakteColorModalCardBorderAlpha: ColorDescription;
 	vkontakteColorLandingSnippetBorderAlpha: ColorDescription;
 	vkontakteColorActionSheetSeparatorAlpha: ColorDescription;
 	vkontakteColorInputBorder: ColorDescription;
+	vkontakteColorSearchBarBackground: ColorDescription;
+	vkontakteBackgroundHoverAlpha: ColorDescription;
+	vkontakteColorBackgroundSuggestions: ColorDescription;
+
+	vkontakteColorTextName: ColorDescription;
+	vkontakteColorAccentAlternate: ColorDescription;
+	vkontakteColorBackgroundKeyboard: ColorDescription;
+	vkontakteColorContentPlaceholderIcon: ColorDescription;
+	vkontakteColorContentTintForeground: ColorDescription;
+	vkontakteColorControlBackground: ColorDescription;
+	vkontakteColorControlForeground: ColorDescription;
+	vkontakteColorControlTintMuted: ColorDescription;
+
+	vkontakteColorHeaderSearchFieldBackground: ColorDescription;
+	vkontakteColorHeaderSearchFieldTint: ColorDescription;
+	vkontakteColorHeaderTabActiveIndicator: ColorDescription;
+
+	vkontakteColorIconOutlineMedium: ColorDescription;
+	vkontakteColorIconOutlineSecondary: ColorDescription;
+
+	vkontakteColorSkeletonShimmerFrom: ColorDescription;
+	vkontakteColorAlphaSkeletonShimmerTo: ColorDescription;
+
+	vkontakteColorLoaderBackground: ColorDescription;
+	vkontakteColorLoaderTint: ColorDescription;
+
+	vkontakteColorMusicPlaybackIcon: ColorDescription;
+
+	vkontakteColorStatusBackground: ColorDescription;
+
+	vkontakteColorPlaceholderIconForegroundPrimary: ColorDescription;
+	vkontakteColorPlaceholderIconForegroundSecondary: ColorDescription;
+	vkontakteColorPlaceholderIconTint: ColorDescription;
+
+	vkontakteColorPollOptionBackground: ColorDescription;
+
+	vkontakteColorSearchBarFieldTint: ColorDescription;
+
+	vkontakteColorTabbarActiveIcon: ColorDescription;
+	vkontakteColorTabbarBackground: ColorDescription;
+	vkontakteColorTabbarInactiveIcon: ColorDescription;
+	vkontakteColorTabbarTabletTextSecondary: ColorDescription;
+
+	vkontakteColorToolbarAttachBackgroundFrom: ColorDescription;
+
+	vkontakteColorSplashScreenIcon: ColorDescription;
+
+	vkontakteColorIconName: ColorDescription;
+
+	vkontakteColorPanelTabActiveText: ColorDescription;
+
+	vkontakteColorBackgroundTextAlpha: ColorDescription;
+
+	vkontakteImReplySeparator: ColorDescription;
+
+	vkontakteImToolbarVoiceMsgBackground: ColorDescription;
+
+	vkontakteColorModalCardHeaderClose: ColorDescription;
+
+	vkontakteImBubbleButtonOutgoingBackgroundAlpha: ColorDescription;
+	vkontakteImBubbleButtonForeground: ColorDescription;
+	vkontakteImBubbleIncomingHighlighted: ColorDescription;
+	vkontakteImBubbleGiftBackground: ColorDescription;
+	vkontakteImBubbleGiftBackgroundHighlighted: ColorDescription;
+	vkontakteImBubbleOutgoingAlternate: ColorDescription;
+
+	vkontakteImAttachTint: ColorDescription;
 
 	vkontakteColorImForwardLineAlpha: ColorDescription;
 

diff --git a/src/lint/__snapshots__/lint.test.ts.snap b/src/lint/__snapshots__/lint.test.ts.snap
@@ -1,3 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`lint snapshot 1`] = `[]`;
+exports[`lint snapshot 1`] = `
+[
+  "paradigmBase: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "paradigmBaseDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "vkBase: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "vkBaseDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "vkCom: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "vkComDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "vkIOS: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "vkIOSDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "vkontakteAndroid: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "vkontakteAndroidDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "vkontakteIOS: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "vkontakteIOSDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "vkontakteCom: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "vkontakteComDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "octavius: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "octaviusDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "octaviusCompact: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "octaviusCompactDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "octaviusVK: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "octaviusVKDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "calendar: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "calendarDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "octaviusWhite: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "media: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "mediaDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "mycom: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "pharma: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "home: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "homeDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "otvet: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "otvetDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "cloud: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "cloudDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "portalUI: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "portalUIDark: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "workspaceAdmin: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "calls: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "todo: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "search: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+  "promo: colors.colorOverlaySecondary error: Color token type mismatch: alpha token name but opaque value",
+]
+`;
diff --git a/src/themeDescriptions/base/paradigm.ts b/src/themeDescriptions/base/paradigm.ts
@@ -77,6 +77,7 @@ export const lightColors: ColorsDescription = {
 		colorTextContrastThemed: '#FFFFFF',
 		colorLinkContrast: '#FFFFFF',
 		colorTextPositive: '#0DC268',
+		colorTextButton: '#005FF9',
 
 		// Icons
 		colorIconAccent: '#005FF9',
@@ -94,6 +95,7 @@ export const lightColors: ColorsDescription = {
 		colorIconContrastThemed: '#FFFFFF',
 		colorIconPositive: '#0DC268',
 		colorIconContrastSecondary: '#F2F3F5',
+		colorIconButton: '#005FF9',
 
 		// Stroke
 		colorStrokeAccent: '#005FF9',
@@ -108,6 +110,7 @@ export const lightColors: ColorsDescription = {
 		colorStrokePositive: '#0DC268',
 		colorSeparatorPrimary2x: '#CDD0D5',
 		colorSeparatorPrimary3x: '#BFC3CA',
+		colorStrokeButton: '#005FF9',
 
 		// Palette
 		colorAccentBlue: '#005FF9',
@@ -139,7 +142,9 @@ export const lightColors: ColorsDescription = {
 		colorAvatarOverlay: 'rgba(145, 147, 153, 0.48)',
 		colorAvatarOverlayInverseAlpha: 'rgba(255, 255, 255, 0.85)',
 		colorOverlayPrimary: 'rgba(0, 0, 0, 0.48)',
+		colorOverlaySecondary: 'rgb(44, 45, 46, 0.5)',
 		colorSegmentedControl: '#FFFFFF',
+		colorTabbarTextInactive: '#99A2AD',
 		colorTransparent: 'transparent',
 	},
 };
@@ -200,6 +205,7 @@ export const darkColors: ColorsDescription = {
 		colorTextContrastThemed: '#2C2D2E',
 		colorLinkContrast: '#FFFFFF',
 		colorTextPositive: '#0DC268',
+		colorTextButton: '#FFFFFF',
 
 		// Icons
 		colorIconAccent: '#3C82FD',
@@ -217,6 +223,7 @@ export const darkColors: ColorsDescription = {
 		colorIconContrastThemed: '#2C2D2E',
 		colorIconPositive: '#0DC268',
 		colorIconContrastSecondary: '#F2F3F5',
+		colorIconButton: '#FFFFFF',
 
 		// Stroke
 		colorStrokeAccent: '#3C82FD',
@@ -231,6 +238,7 @@ export const darkColors: ColorsDescription = {
 		colorSeparatorPrimary2x: '#202022',
 		colorSeparatorPrimary3x: '#2d2d2f',
 		colorStrokePositive: '#0DC268',
+		colorStrokeButton: '#FFFFFF',
 
 		// Palette
 		colorAccentBlue: '#2775FC',
@@ -262,7 +270,9 @@ export const darkColors: ColorsDescription = {
 		colorAvatarOverlay: 'rgba(176, 178, 182, 0.48)',
 		colorAvatarOverlayInverseAlpha: 'rgba(255, 255, 255, 0.85)',
 		colorOverlayPrimary: 'rgba(0, 0, 0, 0.48)',
+		colorOverlaySecondary: 'rgb(55, 56, 57, 0.5)',
 		colorSegmentedControl: '#626364',
+		colorTabbarTextInactive: '#76787A',
 		colorTransparent: 'transparent',
 	},
 };
@@ -455,6 +465,9 @@ export const lightThemeBase: ThemeDescription = {
 	sizeBorderRadius: {
 		regular: 8,
 	},
+	sizeBorderRadiusRounded: {
+		regular: 48,
+	},
 	sizeCheckBorderRadius: {
 		regular: 4,
 	},

diff --git a/src/themeDescriptions/base/vk.ts b/src/themeDescriptions/base/vk.ts
@@ -107,6 +107,10 @@ export const colorFromFigma = (colorsScheme: 'light' | 'dark'): ColorsDescriptio
 			colorTextLinkVisited: text.text_link_visited,
 			colorTextMuted: text.text_muted,
 			colorLinkContrast: text.link_contrast,
+			colorTextButton: {
+				light: '#2688eb',
+				dark: '#ffffff',
+			}[colorsScheme],
 
 			// Icons
 			colorIconAccent: icons.icon_accent,
@@ -124,6 +128,10 @@ export const colorFromFigma = (colorsScheme: 'light' | 'dark'): ColorsDescriptio
 			colorIconContrastSecondary: icons.icon_contrast_secondary,
 			colorIconPositive: icons.icon_positive,
 			colorIconNegative: icons.icon_negative,
+			colorIconButton: {
+				light: '#2688eb',
+				dark: '#ffffff',
+			}[colorsScheme],
 
 			// Stroke
 			colorStrokeAccent: stroke.stroke_accent,
@@ -151,6 +159,10 @@ export const colorFromFigma = (colorsScheme: 'light' | 'dark'): ColorsDescriptio
 				},
 				dark: 'rgba(255, 255, 255, 0.12)',
 			}[colorsScheme],
+			colorStrokeButton: {
+				light: '#2688eb',
+				dark: '#ffffff',
+			}[colorsScheme],
 
 			// Palette
 			colorAccentBlue: palette.accent_blue,
@@ -166,6 +178,10 @@ export const colorFromFigma = (colorsScheme: 'light' | 'dark'): ColorsDescriptio
 
 			// Other
 			colorOverlayPrimary: other.overlay_primary,
+			colorOverlaySecondary: {
+				light: 'rgb(44, 45, 46, 0.5)',
+				dark: 'rgb(55, 56, 57, 0.5)',
+			}[colorsScheme],
 			colorAvatarOverlay: other.avatar_overlay_alpha,
 			colorAvatarOverlayInverseAlpha: other.avatar_overlay_inverse_alpha,
 			colorActionSheetText: other.action_sheet_text,
@@ -185,6 +201,10 @@ export const colorFromFigma = (colorsScheme: 'light' | 'dark'): ColorsDescriptio
 			colorSearchFieldBackground: other.search_field_background,
 			colorPanelHeaderIcon: other.panel_header_icon,
 			colorSegmentedControl: other.segmented_control,
+			colorTabbarTextInactive: {
+				light: '#99a2ad',
+				dark: '#76787a',
+			}[colorsScheme],
 			colorTransparent: 'transparent',
 		},
 	};
@@ -408,6 +428,9 @@ export const lightTheme: ThemeDescription = {
 	sizeBorderRadius: {
 		regular: 8,
 	},
+	sizeBorderRadiusRounded: {
+		regular: 48,
+	},
 	sizeCheckBorderRadius: {
 		regular: 4,
 	},