@gravityforms/components
Version:
UI components for use in Gravity Forms development. Both React and vanilla js flavors.
129 lines (120 loc) • 3.88 kB
JavaScript
/**
* @function hexToRgb
* @description Converts a hex color code to RGB.
*
* @param {string} h - The input hex color (e.g., '#FF5733').
*
* @return {object} - An object containing the RGB values (e.g., { r: 255, g: 87, b: 51 }).
*/
export const hexToRgb = ( h ) => {
h = h.replace( '#', '' );
const r = parseInt( h.substring( 0, 2 ), 16 );
const g = parseInt( h.substring( 2, 4 ), 16 );
const b = parseInt( h.substring( 4, 6 ), 16 );
return { r, g, b };
};
/**
* @function rgbToHsl
* @description Converts an RGB color to HSL.
*
* @param {object} rgb - An object containing the RGB values (e.g., { r: 255, g: 87, b: 51 }).
*
* @return {object} - An object containing the HSL values (e.g., { h: 10, s: 100, l: 50 }).
*/
export const rgbToHsl = ( { r, g, b } ) => {
r /= 255;
g /= 255;
b /= 255;
const max = Math.max( r, g, b );
const min = Math.min( r, g, b );
let h, s, l = ( max + min ) / 2; // eslint-disable-line
if ( max === min ) {
h = s = 0; // Achromatic
} else {
const d = max - min;
s = l > 0.5 ? d / ( 2 - max - min ) : d / ( max + min );
switch ( max ) {
case r:
// eslint-disable-next-line no-mixed-operators
h = ( g - b ) / d + ( g < b ? 6 : 0 );
break;
case g:
// eslint-disable-next-line no-mixed-operators
h = ( b - r ) / d + 2;
break;
case b:
// eslint-disable-next-line no-mixed-operators
h = ( r - g ) / d + 4;
break;
}
h /= 6;
}
return { h: h * 360, s: s * 100, l: l * 100 };
};
/**
* @function hslToCss
* @description Converts an HSL color to a CSS hsla string.
*
* @param {number} h - The hue value (0-360).
* @param {number} s - The saturation value (0-100).
* @param {number} l - The lightness value (0-100).
* @param {number} [a=1] - The alpha value (0-1).
*
* @return {string} - CSS hsla string.
*/
export const hslToCss = ( h, s, l, a = 1 ) => {
return `hsla(${ Math.round( h ) }, ${ Math.round( s ) }%, ${ Math.round( l ) }%, ${ a })`;
};
/**
* @function generateComplementaryGradient
* @description Generates a radial gradient with complementary colors based on a hex code.
*
* @param {string} hex - The input hex color (e.g., '#FF5733').
* @param {object} layoutOverride - Optional parameters for gradient customization.
*
* @return {string} - CSS background-image string with radial gradients.
*/
export const generateComplementaryGradient = ( hex, layoutOverride ) => {
const rgb = hexToRgb( hex );
const hsl = rgbToHsl( rgb );
// Calculate complementary colors
const baseHue = hsl.h;
const complementaryHue1 = ( baseHue + 180 ) % 360; // Primary complement
const complementaryHue2 = ( baseHue + 150 ) % 360; // Slightly offset for variety
const complementaryHue3 = ( baseHue + 210 ) % 360; // Another offset
// Define gradient stops with base color dominating
const gradients = [
{
position: layoutOverride?.position || '40% -30%', // Center the base color
color: hslToCss( baseHue, hsl.s, hsl.l, 0.9 ),
size: layoutOverride?.size || '25%',
transparent: layoutOverride?.transparent || '80%', // Gradual fade to maintain smoothness
},
{
position: '70% 20%',
color: hslToCss( complementaryHue1, hsl.s * 0.9, hsl.l * 1.1, 0.7 ),
size: '15%', // Smaller size for accent
transparent: '60%',
},
{
position: '30% 80%',
color: hslToCss( complementaryHue2, hsl.s * 0.85, hsl.l * 0.9, 0.6 ),
size: '12%', // Smaller size for accent
transparent: '55%',
},
{
position: '80% 70%',
color: hslToCss( complementaryHue3, hsl.s * 0.95, hsl.l * 1.2, 0.5 ),
size: '10%', // Smallest accent
transparent: '50%',
},
];
// Generate radial gradient CSS
const gradientCss = gradients
.map(
( g ) =>
`radial-gradient(circle at ${ g.position }, ${ g.color } ${ g.size }, transparent ${ g.transparent })`
)
.join( ', ' );
return gradientCss;
};