native-variants
Version:
A library for handling variants in React Native components with theme support.
70 lines (69 loc) • 2.04 kB
TypeScript
/**
* Converts a hex color to a hex color with alpha transparency.
* Appends the alpha value as a 2-character hex suffix.
*
* @param hex - A hex color string in the format #RRGGBB
* @param opacity - Opacity percentage from 0 (transparent) to 100 (opaque)
* @returns A hex color string with alpha in the format #RRGGBBAA
* @throws Error if the hex color is not in the correct format
*
* @example
* ```ts
* // 50% opacity
* alpha("#FF0000", 50); // "#FF00007F"
*
* // Fully transparent
* alpha("#FF0000", 0); // "#FF000000"
*
* // Fully opaque
* alpha("#FF0000", 100); // "#FF0000FF"
*
* // Use in styles
* const buttonStyles = {
* backgroundColor: alpha(theme.colors.primary, 10),
* borderColor: alpha(theme.colors.primary, 30),
* };
* ```
*/
export declare function alpha(hex: string, opacity: number): string;
/**
* Converts a hex color to an RGBA string.
* Useful when you need CSS-style rgba() values.
*
* @param hex - A hex color string in the format #RRGGBB or #RGB
* @param opacity - Opacity value from 0 (transparent) to 1 (opaque)
* @returns An rgba() color string
*
* @example
* ```ts
* hexToRgba("#FF0000", 0.5); // "rgba(255, 0, 0, 0.5)"
* hexToRgba("#F00", 0.5); // "rgba(255, 0, 0, 0.5)"
* ```
*/
export declare function hexToRgba(hex: string, opacity: number): string;
/**
* Lightens a hex color by a percentage.
*
* @param hex - A hex color string in the format #RRGGBB or #RGB
* @param percent - Percentage to lighten (0-100)
* @returns A lightened hex color string
*
* @example
* ```ts
* lighten("#FF0000", 20); // Lightens red by 20%
* ```
*/
export declare function lighten(hex: string, percent: number): string;
/**
* Darkens a hex color by a percentage.
*
* @param hex - A hex color string in the format #RRGGBB or #RGB
* @param percent - Percentage to darken (0-100)
* @returns A darkened hex color string
*
* @example
* ```ts
* darken("#FF0000", 20); // Darkens red by 20%
* ```
*/
export declare function darken(hex: string, percent: number): string;