@cometchat/chat-uikit-react-native
Version:
Ready-to-use Chat UI Components for React Native
147 lines (146 loc) • 7.75 kB
TypeScript
import { DeepPartial } from "../shared/helper/types";
import { CometChatTheme } from "./type";
export declare enum Brightness {
LIGHT = 0,
DARK = 1
}
export declare class CometChatThemeHelper {
/**
* Returns a list of color blending percentages based on the brightness setting.
*
* @param brightness - The brightness mode to determine the blending percentages.
* Use `Brightness.LIGHT` for light mode and `Brightness.DARK` for dark mode.
* @returns An array of blending percentages. For light mode, it provides percentages closer to white;
* for dark mode, it provides percentages closer to black.
*
* @example
* ```typescript
* const lightPercentages = getBlendColorsPercentage(Brightness.LIGHT);
* console.log(lightPercentages); // Output: [0.96, 0.88, 0.77, 0.66, 0.55, 0.44, 0.33, 0.22, 0.11, 0.11]
* ```
*/
static getBlendColorsPercentage(brightness: Brightness): {
[key: number]: number;
};
/**
* Converts a hexadecimal color code to its RGB components.
*
* @param hex - The color code in hexadecimal format (e.g., "#FF0000" for red).
* @returns An object containing the red, green, and blue components of the color.
*
* @example
* ```typescript
* const rgb = hexToRgb("#FF0000");
* console.log(rgb); // Output: { r: 255, g: 0, b: 0 }
* ```
*/
private static hexToRgb;
/**
* Converts RGB color components to a hexadecimal color code.
*
* @param r - The red component of the color (0-255).
* @param g - The green component of the color (0-255).
* @param b - The blue component of the color (0-255).
* @returns The color code in hexadecimal format.
*
* @example
* ```typescript
* const hex = rgbToHex(255, 0, 0);
* console.log(hex); // Output: "#FF0000"
* ```
*/
private static rgbToHex;
/**
* Blends two colors together based on a specified percentage.
*
* @param baseColor - The base color in hexadecimal format (e.g., "#FF0000" for red).
* @param blendColor - The color to blend with the base color, also in hexadecimal format.
* @param percentage - The percentage of the `blendColor` to blend with the `baseColor`.
* It should be a value between 0 and 1, where 0 means only the `baseColor` is used and
* 1 means only the `blendColor` is used.
* @returns The resulting blended color in hexadecimal format.
*
* @example
* ```typescript
* const brightness: Brightness = Brightness.LIGHT;
* const blendColorsPercentage = CometChatThemeHelper.getBlendColorsPercentage(brightness);
* const blendedColor = CometChatThemeHelper.blendColors("#6852D6", "#FFFFFF", blendColorsPercentage[0]);
* ```
*/
private static blendColors;
static updateColors(color: Partial<CometChatTheme["color"]>, mode: Brightness): Partial<{
background1: import("react-native/types").ColorValue;
background2: import("react-native/types").ColorValue;
background3: import("react-native/types").ColorValue;
background4: import("react-native/types").ColorValue;
borderLight: import("react-native/types").ColorValue;
borderDefault: import("react-native/types").ColorValue;
borderDark: import("react-native/types").ColorValue;
borderHighlight: import("react-native/types").ColorValue;
textPrimary: import("react-native/types").ColorValue;
textSecondary: import("react-native/types").ColorValue;
textTertiary: import("react-native/types").ColorValue;
textDisabled: import("react-native/types").ColorValue;
textWhite: import("react-native/types").ColorValue;
textHighlight: import("react-native/types").ColorValue;
iconPrimary: import("react-native/types").ColorValue;
iconSecondary: import("react-native/types").ColorValue;
iconTertiary: import("react-native/types").ColorValue;
iconWhite: import("react-native/types").ColorValue;
iconHighlight: import("react-native/types").ColorValue;
primaryButtonBackground: import("react-native/types").ColorValue;
primaryButtonIcon: import("react-native/types").ColorValue;
primaryButtonText: import("react-native/types").ColorValue;
secondaryButtonBackground: import("react-native/types").ColorValue;
secondaryButtonIcon: import("react-native/types").ColorValue;
secondaryButtonText: import("react-native/types").ColorValue;
linkBackground: import("react-native/types").ColorValue;
fabButtonBackground: import("react-native/types").ColorValue;
fabButtonIcon: import("react-native/types").ColorValue;
whiteHover: import("react-native/types").ColorValue;
whitePressed: import("react-native/types").ColorValue;
sendBubbleBackground: import("react-native/types").ColorValue;
sendBubbleText: import("react-native/types").ColorValue;
sendBubbleTextHighlight: import("react-native/types").ColorValue;
sendBubbleLink: import("react-native/types").ColorValue;
sendBubbleTimestamp: import("react-native/types").ColorValue;
sendBubbleIcon: import("react-native/types").ColorValue;
receiveBubbleBackground: import("react-native/types").ColorValue;
receiveBubbleText: import("react-native/types").ColorValue;
receiveBubbleTextHighlight: import("react-native/types").ColorValue;
receiveBubbleLink: import("react-native/types").ColorValue;
receiveBubbleTimestamp: import("react-native/types").ColorValue;
receiveBubbleIcon: import("react-native/types").ColorValue;
staticBlack: import("react-native/types").ColorValue;
staticWhite: import("react-native/types").ColorValue;
info: import("react-native/types").ColorValue;
warning: import("react-native/types").ColorValue;
success: import("react-native/types").ColorValue;
error: import("react-native/types").ColorValue;
neutral50: import("react-native/types").ColorValue;
neutral100: import("react-native/types").ColorValue;
neutral200: import("react-native/types").ColorValue;
neutral300: import("react-native/types").ColorValue;
neutral400: import("react-native/types").ColorValue;
neutral500: import("react-native/types").ColorValue;
neutral600: import("react-native/types").ColorValue;
neutral700: import("react-native/types").ColorValue;
neutral800: import("react-native/types").ColorValue;
neutral900: import("react-native/types").ColorValue;
extendedPrimary50: import("react-native/types").ColorValue;
extendedPrimary100: import("react-native/types").ColorValue;
extendedPrimary200: import("react-native/types").ColorValue;
extendedPrimary300: import("react-native/types").ColorValue;
extendedPrimary400: import("react-native/types").ColorValue;
extendedPrimary500: import("react-native/types").ColorValue;
extendedPrimary600: import("react-native/types").ColorValue;
extendedPrimary700: import("react-native/types").ColorValue;
extendedPrimary800: import("react-native/types").ColorValue;
extendedPrimary900: import("react-native/types").ColorValue;
primary: import("react-native/types").ColorValue;
}>;
private static updateOtherColors;
private static updateExtendedColorsForLightTheme;
private static updateExtendedColorsForDarkTheme;
static updateSpacing(spacing: DeepPartial<CometChatTheme["spacing"]>): CometChatTheme["spacing"];
}