67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
import { Theme, Typography } from '@reactive-resume/schema';
|
|
import { RgbColor } from 'react-colorful';
|
|
|
|
import { hexColorPattern } from '@/config/colors';
|
|
|
|
export const generateTypographyStyles = ({ family, size }: Typography): string => `
|
|
font-size: ${size.body}px;
|
|
font-family: ${family.body};
|
|
|
|
svg { font-size: ${size.body}px; }
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-weight: bold;
|
|
font-family: ${family.heading};
|
|
}
|
|
|
|
h1 { font-size: ${size.heading}px; line-height: ${size.heading}px; }
|
|
h2 { font-size: ${size.heading / 1.5}px; line-height: ${size.heading / 1.5}px; }
|
|
h3 { font-size: ${size.heading / 2}px; line-height: ${size.heading / 2}px; }
|
|
h4 { font-size: ${size.heading / 2.5}px; line-height: ${size.heading / 2.5}px; }
|
|
h5 { font-size: ${size.heading / 3}px; line-height: ${size.heading / 3}px; }
|
|
h6 { font-size: ${size.heading / 3.5}px; line-height: ${size.heading / 3.5}px; }
|
|
`;
|
|
|
|
export const generateThemeStyles = ({ text, background, primary }: Theme): string => `
|
|
color: ${text};
|
|
background-color: ${background};
|
|
--primary-color: ${primary};
|
|
|
|
svg {
|
|
color: var(--primary-color);
|
|
}
|
|
`;
|
|
|
|
export const hexToRgb = (hex: string): RgbColor | null => {
|
|
const result = hexColorPattern.exec(hex);
|
|
|
|
return result
|
|
? {
|
|
r: parseInt(result[1], 16),
|
|
g: parseInt(result[2], 16),
|
|
b: parseInt(result[3], 16),
|
|
}
|
|
: null;
|
|
};
|
|
|
|
export const getContrastColor = (color: string): 'dark' | 'light' => {
|
|
const rgb = hexToRgb(color);
|
|
|
|
if (rgb) {
|
|
const { r, g, b } = rgb;
|
|
|
|
if (r * 0.299 + g * 0.587 + b * 0.114 > 186) {
|
|
return 'dark';
|
|
} else {
|
|
return 'light';
|
|
}
|
|
}
|
|
|
|
return 'light';
|
|
};
|