1- import { useTheme } from '@mui/material/styles' ;
1+ // Helper function to convert hex to HSL
2+ const hexToHsl = ( hex : string ) : [ number , number , number ] => {
3+ const r = parseInt ( hex . slice ( 1 , 3 ) , 16 ) / 255 ;
4+ const g = parseInt ( hex . slice ( 3 , 5 ) , 16 ) / 255 ;
5+ const b = parseInt ( hex . slice ( 5 , 7 ) , 16 ) / 255 ;
26
3- export const generateThemedSVG = ( primaryMain : string , primaryLight : string , primaryDark : string ) => {
4- // URL encode the colors properly
5- const primary = encodeURIComponent ( primaryMain ) ;
6- const primaryLightEncoded = encodeURIComponent ( primaryLight ) ;
7- const primaryDarkEncoded = encodeURIComponent ( primaryDark ) ;
7+ const max = Math . max ( r , g , b ) ;
8+ const min = Math . min ( r , g , b ) ;
9+ let h = 0 , s = 0 ;
10+ const l = ( max + min ) / 2 ;
811
9- return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='${ primaryLightEncoded } ${ primaryDarkEncoded } ${ primaryDarkEncoded } ${ primary } ${ primaryLightEncoded } ${ primary } ${ primaryLightEncoded } ${ primaryDarkEncoded } ${ primary } ${ primaryLightEncoded } ;
10- } ;
12+ if ( max !== min ) {
13+ const d = max - min ;
14+ s = l > 0.5 ? d / ( 2 - max - min ) : d / ( max + min ) ;
15+ switch ( max ) {
16+ case r : h = ( g - b ) / d + ( g < b ? 6 : 0 ) ; break ;
17+ case g : h = ( b - r ) / d + 2 ; break ;
18+ case b : h = ( r - g ) / d + 4 ; break ;
19+ }
20+ h /= 6 ;
21+ }
22+
23+ return [ h * 360 , s * 100 , l * 100 ] ;
24+ } ;
25+
26+ // Helper function to convert HSL to hex
27+ const hslToHex = ( h : number , s : number , l : number ) : string => {
28+ h /= 360 ;
29+ s /= 100 ;
30+ l /= 100 ;
31+
32+ const c = ( 1 - Math . abs ( 2 * l - 1 ) ) * s ;
33+ const x = c * ( 1 - Math . abs ( ( h * 6 ) % 2 - 1 ) ) ;
34+ const m = l - c / 2 ;
35+ let r = 0 , g = 0 , b = 0 ;
36+
37+ if ( 0 <= h && h < 1 / 6 ) {
38+ r = c ; g = x ; b = 0 ;
39+ } else if ( 1 / 6 <= h && h < 2 / 6 ) {
40+ r = x ; g = c ; b = 0 ;
41+ } else if ( 2 / 6 <= h && h < 3 / 6 ) {
42+ r = 0 ; g = c ; b = x ;
43+ } else if ( 3 / 6 <= h && h < 4 / 6 ) {
44+ r = 0 ; g = x ; b = c ;
45+ } else if ( 4 / 6 <= h && h < 5 / 6 ) {
46+ r = x ; g = 0 ; b = c ;
47+ } else if ( 5 / 6 <= h && h < 1 ) {
48+ r = c ; g = 0 ; b = x ;
49+ }
50+
51+ r = Math . round ( ( r + m ) * 255 ) ;
52+ g = Math . round ( ( g + m ) * 255 ) ;
53+ b = Math . round ( ( b + m ) * 255 ) ;
54+
55+ return `#${ r . toString ( 16 ) . padStart ( 2 , '0' ) } ${ g . toString ( 16 ) . padStart ( 2 , '0' ) } ${ b . toString ( 16 ) . padStart ( 2 , '0' ) } ;
56+ } ;
57+
58+ // Generate lighter and darker variants of a color
59+ const generateColorVariants = ( baseColor : string ) => {
60+ // Ensure hex format
61+ const hex = baseColor . startsWith ( '#' ) ? baseColor : `#${ baseColor } ;
62+
63+ const [ h , s , l ] = hexToHsl ( hex ) ;
64+
65+ // Generate lighter variant (increase lightness by 20%)
66+ const lightL = Math . min ( 100 , l + 20 ) ;
67+ const lightColor = hslToHex ( h , s , lightL ) ;
68+
69+ // Generate darker variant (decrease lightness by 20%)
70+ const darkL = Math . max ( 0 , l - 20 ) ;
71+ const darkColor = hslToHex ( h , s , darkL ) ;
72+
73+ return {
74+ main : hex ,
75+ light : lightColor ,
76+ dark : darkColor
77+ } ;
78+ } ;
79+
80+ export const generateLiquidCheeseSVG = ( primaryColor : string ) => {
81+ const hex = primaryColor . startsWith ( '#' ) ? primaryColor : `#${ primaryColor } ;
82+ const [ h , s , l ] = hexToHsl ( hex ) ;
83+
84+ // Generate 10 color variants from darkest to lightest
85+ const colorSteps = [ ] ;
86+ for ( let i = 0 ; i < 10 ; i ++ ) {
87+ const lightness = Math . max ( 0 , Math . min ( 100 , l + ( - 30 + ( i * 7 ) ) ) ) ; // Steps of 7% lightness
88+ const color = hslToHex ( h , s , lightness ) ;
89+ colorSteps . push ( encodeURIComponent ( color ) ) ;
90+ }
91+
92+ return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='${ colorSteps [ 0 ] } ${ colorSteps [ 1 ] } ${ colorSteps [ 2 ] } ${ colorSteps [ 3 ] } ${ colorSteps [ 4 ] } ${ colorSteps [ 5 ] } ${ colorSteps [ 6 ] } ${ colorSteps [ 7 ] } ${ colorSteps [ 8 ] } ${ colorSteps [ 9 ] } ;
93+ } ;
94+
95+ export const generateEnvelopeSVG = ( primaryColor : string ) => {
96+ const colors = generateColorVariants ( primaryColor ) ;
97+ const primaryLightEncoded = encodeURIComponent ( colors . light ) ;
98+ const primaryDarkEncoded = encodeURIComponent ( colors . dark ) ;
99+
100+ return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 2 1'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='${ primaryLightEncoded } ${ primaryDarkEncoded } ${ primaryLightEncoded } ${ primaryLightEncoded } ${ primaryLightEncoded } ${ primaryLightEncoded } ;
101+ }
0 commit comments