Skip to content

Commit

Permalink
Add more vkCom colors & button colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@Zaycevq
Zaycevq committed Jul 20, 2023
1 parent e46fd6b commit 6ec82d9
Show file tree
Hide file tree
Showing 6 changed files with 224 additions and 0 deletions.
18 changes: 18 additions & 0 deletions src/interfaces/general/colors/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -268,6 +268,12 @@ export interface ColorsDescriptionStruct {
*/
colorLinkContrast: ColorDescription;

/**
* @desc Цвет текста для кнопок
* @tags color
*/
colorTextButton: ColorDescription;

// Icons
/**
* @desc Акцентный цвет иконок
Expand Down Expand Up @@ -359,6 +365,12 @@ export interface ColorsDescriptionStruct {
*/
colorIconNegative: ColorDescription;

/**
* @desc Цвет иконок для кнопок
* @tags color, icon
*/
colorIconButton: ColorDescription;

// Stroke
/**
* @desc Цвет акцентной обводки
Expand Down Expand Up @@ -432,6 +444,12 @@ export interface ColorsDescriptionStruct {
*/
colorSeparatorPrimary3x: ColorDescription;

/**
* @desc Цвет обводки для кнопок
* @tags color, stroke
*/
colorStrokeButton: ColorDescription;

// Palette
/**
* @desc Палитра цветов. Голубой цвет
Expand Down
63 changes: 63 additions & 0 deletions src/interfaces/themes/vkontakteAndroid/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,6 +191,69 @@ export interface LocalVkontakteAndroidColorsDescriptionStruct {
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;
vkontakteColorSkeletonShimmerTo?: ColorDescription;

vkontakteColorLoaderBackground?: ColorDescription;
vkontakteColorLoaderTint?: ColorDescription;

vkontakteColorMusicPlaybackIcon?: ColorDescription;

vkontakteColorOverlayStatusBackground?: 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;

vkontakteColorBackgroundTextHighlighted?: ColorDescription;

vkontakteImReplySeparator?: ColorDescription;

vkontakteImToolbarVoiceMsgBackground?: ColorDescription;

vkontakteImBubbleButtonOutgoingBackgroundAlpha?: ColorDescription;
vkontakteImBubbleButtonForeground?: ColorDescription;
vkontakteImBubbleIncomingHighlighted?: ColorDescription;
vkontakteImBubbleGiftBackground?: ColorDescription;
vkontakteImBubbleGiftBackgroundHighlighted?: ColorDescription;
vkontakteImBubbleOutgoingAlternate?: ColorDescription;

vkontakteImAttachTint?: ColorDescription;

vkontakteColorImForwardLineAlpha: ColorDescription;

Expand Down
6 changes: 6 additions & 0 deletions src/themeDescriptions/base/paradigm.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ export const lightColors: ColorsDescription = {
colorTextContrastThemed: '#FFFFFF',
colorLinkContrast: '#FFFFFF',
colorTextPositive: '#0DC268',
colorTextButton: '#005FF9',

// Icons
colorIconAccent: '#005FF9',
Expand All @@ -94,6 +95,7 @@ export const lightColors: ColorsDescription = {
colorIconContrastThemed: '#FFFFFF',
colorIconPositive: '#0DC268',
colorIconContrastSecondary: '#F2F3F5',
colorIconButton: '#005FF9',

// Stroke
colorStrokeAccent: '#005FF9',
Expand All @@ -108,6 +110,7 @@ export const lightColors: ColorsDescription = {
colorStrokePositive: '#0DC268',
colorSeparatorPrimary2x: '#CDD0D5',
colorSeparatorPrimary3x: '#BFC3CA',
colorStrokeButton: '#005FF9',

// Palette
colorAccentBlue: '#005FF9',
Expand Down Expand Up @@ -200,6 +203,7 @@ export const darkColors: ColorsDescription = {
colorTextContrastThemed: '#2C2D2E',
colorLinkContrast: '#FFFFFF',
colorTextPositive: '#0DC268',
colorTextButton: '#3C82FD',

// Icons
colorIconAccent: '#3C82FD',
Expand All @@ -217,6 +221,7 @@ export const darkColors: ColorsDescription = {
colorIconContrastThemed: '#2C2D2E',
colorIconPositive: '#0DC268',
colorIconContrastSecondary: '#F2F3F5',
colorIconButton: '#3C82FD',

// Stroke
colorStrokeAccent: '#3C82FD',
Expand All @@ -231,6 +236,7 @@ export const darkColors: ColorsDescription = {
colorSeparatorPrimary2x: '#202022',
colorSeparatorPrimary3x: '#2d2d2f',
colorStrokePositive: '#0DC268',
colorStrokeButton: '#3C82FD',

// Palette
colorAccentBlue: '#2775FC',
Expand Down
6 changes: 6 additions & 0 deletions src/themeDescriptions/base/vk.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export const lightColors: ColorsDescription = {
colorTextLinkVisited: '#4986CC',
colorTextMuted: '#2C2D2E',
colorLinkContrast: '#FFFFFF',
colorTextButton: '#2688EB',

// Icons
colorIconAccent: '#2688EB',
Expand All @@ -93,6 +94,7 @@ export const lightColors: ColorsDescription = {
colorIconContrastSecondary: '#F2F3F5',
colorIconPositive: '#4BB34B',
colorIconNegative: '#E64646',
colorIconButton: '#2688EB',

// Stroke
colorStrokeAccent: '#2688EB',
Expand All @@ -111,6 +113,7 @@ export const lightColors: ColorsDescription = {
hover: 'rgba(0, 0, 0, 0.24)',
active: 'rgba(0, 0, 0, 0.36)',
},
colorStrokeButton: '#2688EB',

// Palette
colorAccentBlue: '#3F8AE0',
Expand Down Expand Up @@ -217,6 +220,7 @@ export const darkColors: ColorsDescription = {
colorTextLinkVisited: '#4986CC',
colorTextMuted: '#E1E3E6',
colorLinkContrast: '#FFFFFF',
colorTextButton: '#529EF4',

// Icons
colorIconAccent: '#529EF4',
Expand All @@ -234,6 +238,7 @@ export const darkColors: ColorsDescription = {
colorIconContrastSecondary: '#F2F3F5',
colorIconPositive: '#4BB34B',
colorIconNegative: '#FF5C5C',
colorIconButton: '#529EF4',

// Stroke
colorStrokeAccent: '#529EF4',
Expand All @@ -248,6 +253,7 @@ export const darkColors: ColorsDescription = {
colorStrokeContrast: '#FFFFFF',
colorImageBorderAlpha: 'rgba(255, 255, 255, 0.08)',
colorFieldBorderAlpha: 'rgba(255, 255, 255, 0.12)',
colorStrokeButton: '#529EF4',

// Palette
colorAccentBlue: '#529EF4',
Expand Down
7 changes: 7 additions & 0 deletions src/themeDescriptions/themes/vkCom/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ const vkComColors = (theme: typeof vkcom_light) => ({
// colorTextLinkVisited: '#4986CC',
colorTextMuted: resolveColor(theme.colors.text_muted),
colorLinkContrast: resolveColor(theme.colors.text_muted),
colorTextButton: '#346297',

// Icons
colorIconAccent: resolveColor(theme.colors.accent),
Expand All @@ -88,6 +89,7 @@ const vkComColors = (theme: typeof vkcom_light) => ({
// colorIconContrastSecondary: '#F2F3F5',
colorIconPositive: resolveColor(theme.colors.button_commerce_background),
colorIconNegative: resolveColor(theme.colors.destructive),
colorIconButton: '#346297',

// Stroke
colorStrokeAccent: resolveColor(theme.colors.accent),
Expand All @@ -102,6 +104,7 @@ const vkComColors = (theme: typeof vkcom_light) => ({
// colorStrokeContrast: '#FFFFFF',
colorImageBorderAlpha: resolveColor(theme.colors.image_border),
// colorFieldBorderAlpha: resolveColor(theme.colors.field_border),
colorStrokeButton: '#346297',

// Palette
colorAccentBlue: resolveColor(theme.colors.dynamic_blue),
Expand Down Expand Up @@ -251,6 +254,10 @@ const vkComDarkColor: ColorsDescription = {
hover: 'rgba(255, 255, 255, 0.12)',
active: 'rgba(255, 255, 255, 0.14)',
},
colorTextButton: '#E1E3E6',
colorIconButton: '#E1E3E6',
colorStrokeButton: '#E1E3E6',

Check failure on line 260 in src/themeDescriptions/themes/vkCom/index.ts

View workflow job for this annotation

GitHub Actions / lint 

Delete `⏎`
},
};

Expand Down
124 changes: 124 additions & 0 deletions src/themeDescriptions/themes/vkontakteCom/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,69 @@ const vkontakteComLocalColorLight: LocalVkontakteAndroidColorsDescriptionStruct
vkontakteColorActionSheetSeparatorAlpha: 'rgba(0, 0, 0, 0.12)',
vkontakteColorInputBorder: '#D3D9DE',
vkontakteColorSearchBarBackground: '#e5ebf1',
vkontakteColorSearchBarFieldTint: '#818c99',
vkontakteBackgroundHoverAlpha: 'rgba(174, 183, 194, 0.12)',
vkontakteColorAccentAlternate: '#0077ff',
vkontakteColorBackgroundSuggestions: '#FFFFFF',
vkontakteColorBackgroundKeyboard: '#dce1e6',
vkontakteColorContentPlaceholderIcon: '#b2b2b2',
vkontakteColorContentTintForeground: '#939393',
vkontakteColorTextName: '#2a5885',

Check failure on line 23 in src/themeDescriptions/themes/vkontakteCom/index.ts

View workflow job for this annotation

GitHub Actions / lint 

Delete `↹`
vkontakteColorControlBackground: '#edeef0',
vkontakteColorControlForeground: '#447bba',
vkontakteColorControlTintMuted: '#828282',

vkontakteColorHeaderSearchFieldBackground: '#edeef0',
vkontakteColorHeaderSearchFieldTint: '#818c99',
vkontakteColorHeaderTabActiveIndicator: '#397dcc',

vkontakteColorIconOutlineMedium: '#818c99',
vkontakteColorIconOutlineSecondary: '#99a2ad',

vkontakteColorSkeletonShimmerFrom: '#FFFFFF',
vkontakteColorSkeletonShimmerTo: 'transparent',

vkontakteColorLoaderBackground: '#edeef0',
vkontakteColorLoaderTint: '#828282',

vkontakteColorMusicPlaybackIcon: '#000000',

vkontakteColorOverlayStatusBackground: '#edeef0',

vkontakteColorPlaceholderIconForegroundPrimary: '#99a2ad',
vkontakteColorPlaceholderIconForegroundSecondary: '#aeb7c2',
vkontakteColorPlaceholderIconTint: '#1d3a5c',

vkontakteColorPollOptionBackground: '#447bba',

vkontakteColorTabbarActiveIcon: '#447bba',
vkontakteColorTabbarBackground: '#f7f8fa',
vkontakteColorTabbarInactiveIcon: '#99a2ad',
vkontakteColorTabbarTabletTextSecondary: '#818c99',

vkontakteColorToolbarAttachBackgroundFrom: '##dce1e6',

vkontakteColorSplashScreenIcon: '#dce1e6',

vkontakteColorIconName: '#8fadc8',

vkontakteColorPanelTabActiveText: '#4e5966',

vkontakteColorBackgroundTextHighlighted: 'rgba(81, 129, 184, 0.2)',

vkontakteImBubbleButtonOutgoingBackgroundAlpha: 'rgba(255, 255, 255, 0.72)',
vkontakteImBubbleButtonForeground: '#000000',
vkontakteImBubbleIncomingHighlighted: '#d3d9de',
vkontakteImBubbleGiftBackground: '#f4e7c3',
vkontakteImBubbleGiftBackgroundHighlighted: '#e3d3ac',
vkontakteImBubbleOutgoingAlternate: '#FFFFFF',

vkontakteImAttachTint: '#447bba',

vkontakteImReplySeparator: '#2a5885',

vkontakteImToolbarVoiceMsgBackground: '#99a2ad',

vkontakteColorImForwardLineAlpha: 'rgba(0, 20, 51, 0.12)',

Expand All @@ -39,7 +101,69 @@ const vkontakteComLocalColorDark: LocalVkontakteAndroidColorsDescriptionStruct =
vkontakteColorActionSheetSeparatorAlpha: 'rgba(255, 255, 255, 0.16)',
vkontakteColorInputBorder: '#555555',
vkontakteColorSearchBarBackground: '#222222',
vkontakteColorSearchBarFieldTint: '#b2b2b2',
vkontakteBackgroundHoverAlpha: 'rgba(255, 255, 255, 0.08)',
vkontakteColorAccentAlternate: '#FFFFFF',
vkontakteColorBackgroundSuggestions: '#333333',
vkontakteColorBackgroundKeyboard: '#333333',
vkontakteColorContentPlaceholderIcon: '#b2b2b2',
vkontakteColorContentTintForeground: '#939393',
vkontakteColorTextName: '#e1e3e6',

vkontakteColorControlBackground: '#555555',
vkontakteColorControlForeground: '#e1e3e6',
vkontakteColorControlTintMuted: '#939393',

vkontakteColorHeaderSearchFieldBackground: '#424242',
vkontakteColorHeaderSearchFieldTint: '#b2b2b2',
vkontakteColorHeaderTabActiveIndicator: '#397dcc',

vkontakteColorIconOutlineMedium: '#b2b2b2',
vkontakteColorIconOutlineSecondary: '#939393',

vkontakteColorSkeletonShimmerFrom: '#222222',
vkontakteColorSkeletonShimmerTo: 'transparent',

vkontakteColorLoaderBackground: '#555555',
vkontakteColorLoaderTint: '#828282',

vkontakteColorMusicPlaybackIcon: '#FFFFFF',

vkontakteColorOverlayStatusBackground: '#222222',

vkontakteColorPlaceholderIconForegroundPrimary: '#939393',
vkontakteColorPlaceholderIconForegroundSecondary: '#656565',
vkontakteColorPlaceholderIconTint: '#FFFFFF',

vkontakteColorPollOptionBackground: '#FFFFFF',

vkontakteColorTabbarActiveIcon: '#FFFFFF',
vkontakteColorTabbarBackground: '#333333',
vkontakteColorTabbarInactiveIcon: '#828282',
vkontakteColorTabbarTabletTextSecondary: '#828282',

vkontakteColorToolbarAttachBackgroundFrom: '#828282',

vkontakteColorSplashScreenIcon: '#333333',

vkontakteColorIconName: '#b2b2b2',

vkontakteColorPanelTabActiveText: '#e1e3e6',

vkontakteColorBackgroundTextHighlighted: 'rgba(81, 129, 184, 0.2)',

vkontakteImBubbleButtonOutgoingBackgroundAlpha: 'rgba(255, 255, 255, 0.24)',
vkontakteImBubbleButtonForeground: '#e1e3e6',
vkontakteImBubbleIncomingHighlighted: '#656565',
vkontakteImBubbleGiftBackground: '#857250',
vkontakteImBubbleGiftBackgroundHighlighted: '#ab9871',
vkontakteImBubbleOutgoingAlternate: '#555555',

vkontakteImAttachTint: '#FFFFFF',

vkontakteImReplySeparator: '#FFFFFF',

vkontakteImToolbarVoiceMsgBackground: '#555555',

vkontakteColorImForwardLineAlpha: 'rgba(255, 255, 255, 0.24)',

Expand Down

0 comments on commit 6ec82d9

Please sign in to comment.