mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-09-16 01:33:09 +00:00
88d9377adb
Add isLight-aware styling to all block renderers (cards, timeline, accordion, minimal), BlockButtons, and InstallationGuide. Update colorParser gradient functions to generate light-appropriate backgrounds. Reduce wave blob opacity on light theme for better content readability.
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
const COLORS: Record<string, [number, number, number]> = {
|
|
cyan: [34, 211, 238],
|
|
teal: [32, 201, 151],
|
|
green: [64, 192, 87],
|
|
lime: [130, 201, 30],
|
|
yellow: [250, 176, 5],
|
|
orange: [253, 126, 20],
|
|
red: [250, 82, 82],
|
|
pink: [230, 73, 128],
|
|
grape: [190, 75, 219],
|
|
violet: [151, 117, 250],
|
|
indigo: [92, 124, 250],
|
|
blue: [34, 139, 230],
|
|
gray: [134, 142, 150],
|
|
dark: [55, 58, 64],
|
|
};
|
|
|
|
const DEFAULT_COLOR = COLORS.cyan;
|
|
|
|
const hexToRgb = (hex: string): [number, number, number] | null => {
|
|
const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
return match ? [parseInt(match[1], 16), parseInt(match[2], 16), parseInt(match[3], 16)] : null;
|
|
};
|
|
|
|
const getRgb = (color: string): [number, number, number] =>
|
|
COLORS[color] ?? hexToRgb(color) ?? DEFAULT_COLOR;
|
|
|
|
export interface ColorGradientStyle {
|
|
background: string;
|
|
border: string;
|
|
boxShadow?: string;
|
|
}
|
|
|
|
export const getColorGradient = (color: string, light?: boolean): ColorGradientStyle => {
|
|
const [r, g, b] = getRgb(color);
|
|
if (light) {
|
|
return {
|
|
background: `linear-gradient(135deg, rgba(${r},${g},${b},0.12) 0%, rgba(${r},${g},${b},0.05) 100%)`,
|
|
border: `1px solid rgba(${r},${g},${b},0.2)`,
|
|
boxShadow: `0 1px 3px rgba(${r},${g},${b},0.1)`,
|
|
};
|
|
}
|
|
return {
|
|
background: `linear-gradient(135deg, rgba(${r},${g},${b},0.15) 0%, rgba(${r},${g},${b},0.08) 100%)`,
|
|
border: `1px solid rgba(${r},${g},${b},0.3)`,
|
|
};
|
|
};
|
|
|
|
export const getColorGradientSolid = (color: string, light?: boolean): ColorGradientStyle => {
|
|
const [r, g, b] = getRgb(color);
|
|
if (light) {
|
|
// Light theme: soft tinted background instead of dark solid
|
|
const light1 = [245 + r * 0.02, 243 + g * 0.02, 240 + b * 0.02].map((v) =>
|
|
Math.min(255, Math.floor(v)),
|
|
);
|
|
const light2 = [240 + r * 0.03, 237 + g * 0.03, 233 + b * 0.03].map((v) =>
|
|
Math.min(255, Math.floor(v)),
|
|
);
|
|
return {
|
|
background: `linear-gradient(135deg, rgb(${light1}) 0%, rgb(${light2}) 100%)`,
|
|
border: `1px solid rgba(${r},${g},${b},0.25)`,
|
|
boxShadow: `0 1px 4px rgba(${r},${g},${b},0.12)`,
|
|
};
|
|
}
|
|
const dark1 = [22 + r * 0.08, 27 + g * 0.08, 35 + b * 0.08].map(Math.floor);
|
|
const dark2 = [20 + r * 0.05, 24 + g * 0.05, 30 + b * 0.05].map(Math.floor);
|
|
|
|
return {
|
|
background: `linear-gradient(135deg, rgb(${dark1}) 0%, rgb(${dark2}) 100%)`,
|
|
border: `1px solid rgba(${r},${g},${b},0.4)`,
|
|
boxShadow: `inset 0 0 20px rgba(${r},${g},${b},0.15)`,
|
|
};
|
|
};
|