etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add light theme support to connection page

Browse Source 
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.
This commit is contained in:
c0mrade
2026-02-06 18:30:19 +03:00
parent 5171890745
commit 88d9377adb
9 changed files with 83 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/utils/colorParser.ts
View File

@@ -31,16 +31,37 @@ export interface ColorGradientStyle {
boxShadow?: string;
}
export const getColorGradient = (color: string): ColorGradientStyle => {
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): ColorGradientStyle => {
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);