angel
7b622cb1ec
- Implemented Tooltip component using Radix UI for better accessibility and customization. - Created TooltipProvider, TooltipTrigger, and TooltipContent for modular usage. - Added useIsMobile hook to detect mobile devices based on screen width. - Updated themes with new color variables for better design consistency across the application.
54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
// Theme color utilities for dynamic viewport theme color
|
|
|
|
export const themeColors = {
|
|
default: {
|
|
background: 'hsl(0, 0%, 100%)', // White background for light mode
|
|
hex: '#ffffff' // Hex equivalent for theme-color
|
|
},
|
|
blue: {
|
|
background: 'hsl(240, 10%, 3.9%)', // Dark blue background
|
|
hex: '#09090b' // Hex equivalent for theme-color
|
|
},
|
|
violet: {
|
|
background: 'hsl(224, 71.4%, 4.1%)', // Dark violet background
|
|
hex: '#030712' // Hex equivalent for theme-color
|
|
},
|
|
red: {
|
|
background: 'hsl(0, 0%, 3.9%)', // Dark red background
|
|
hex: '#0a0a0a' // Hex equivalent for theme-color
|
|
},
|
|
rose: {
|
|
background: 'hsl(20, 14.3%, 4.1%)', // Dark rose background
|
|
hex: '#0c0a09' // Hex equivalent for theme-color
|
|
},
|
|
orange: {
|
|
background: 'hsl(20, 14.3%, 4.1%)', // Dark orange background
|
|
hex: '#0c0a09' // Hex equivalent for theme-color
|
|
},
|
|
green: {
|
|
background: 'hsl(20, 14.3%, 4.1%)', // Dark green background
|
|
hex: '#0c0a09' // Hex equivalent for theme-color
|
|
},
|
|
yellow: {
|
|
background: 'hsl(20, 14.3%, 4.1%)', // Dark yellow background
|
|
hex: '#0c0a09' // Hex equivalent for theme-color
|
|
},
|
|
} as const;
|
|
|
|
export type Theme = keyof typeof themeColors;
|
|
|
|
export function getThemeBackgroundColor(theme: Theme): string {
|
|
return themeColors[theme]?.hex || themeColors.default.hex;
|
|
}
|
|
|
|
export function hslToHex(h: number, s: number, l: number): string {
|
|
l /= 100;
|
|
const a = s * Math.min(l, 1 - l) / 100;
|
|
const f = (n: number) => {
|
|
const k = (n + h / 30) % 12;
|
|
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
|
|
return Math.round(255 * color).toString(16).padStart(2, '0');
|
|
};
|
|
return `#${f(0)}${f(8)}${f(4)}`;
|
|
}
|