theming tweaks
This commit is contained in:
parent
c4c4eb6358
commit
4af51b3e51
|
@ -6,7 +6,4 @@
|
||||||
max-width: 100vw;
|
max-width: 100vw;
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
border: solid var(--border-size-thick);
|
|
||||||
border-color: var(--color-primary);
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -25,6 +25,6 @@ kbd {
|
||||||
}
|
}
|
||||||
|
|
||||||
kbd.space {
|
kbd.space {
|
||||||
width: calc(3 * var(--kbd-key-size) + 2 * var(--padding-normal));
|
width: calc(4 * var(--kbd-key-size) + 3 * var(--padding-normal));
|
||||||
margin-top: calc(var(--kbd-key-size) + var(--padding-normal));
|
margin-top: calc(var(--kbd-key-size) + var(--padding-normal));
|
||||||
}
|
}
|
||||||
|
|
|
@ -53,13 +53,20 @@ function angle(a: number) {
|
||||||
export function getRandomTheme(): Theme {
|
export function getRandomTheme(): Theme {
|
||||||
const goldenAngle = 180 * (3 - Math.sqrt(5));
|
const goldenAngle = 180 * (3 - Math.sqrt(5));
|
||||||
|
|
||||||
const background = getRandomHsl({maxSaturation: 50, minLightness: 10, maxLightness: 40});
|
const background = getRandomHsl({maxSaturation: 50, minLightness: 10, maxLightness: 30});
|
||||||
|
|
||||||
const primary = getRandomHsl({minSaturation: background.s * 1.2, minLightness: background.l + 20});
|
const otherColorParams = {
|
||||||
primary.h = angle(-Math.floor(1 + Math.random() * 2) * goldenAngle + primary.h);
|
minSaturation: background.s,
|
||||||
|
maxSaturation: 90,
|
||||||
|
minLightness: background.l + 20,
|
||||||
|
maxLightness: 90
|
||||||
|
};
|
||||||
|
|
||||||
const secondary = getRandomHsl({minSaturation: background.s * 1.2, minLightness: background.l + 20});
|
const primary = getRandomHsl(otherColorParams);
|
||||||
primary.h = angle(+Math.floor(1 + Math.random() * 2) * goldenAngle + primary.h);
|
primary.h = angle(-1 * goldenAngle + primary.h);
|
||||||
|
|
||||||
|
const secondary = getRandomHsl(otherColorParams);
|
||||||
|
primary.h = angle(+1 * goldenAngle + primary.h);
|
||||||
|
|
||||||
return {background, primary, secondary};
|
return {background, primary, secondary};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue