robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
whey.party
1import {logger} from '#/logger'
2
3export const BLUE_HUE = 240
4export const RED_HUE = 0
5export const GREEN_HUE = 80
6
7/**
8 * Smooth progression of lightness "stops" for generating HSL colors.
9 */
10export const COLOR_STOPS = [
11 0, 0.05, 0.1, 0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.85, 0.9, 0.95, 1,
12]
13
14export function generateScale(start: number, end: number) {
15 const range = end - start
16 return COLOR_STOPS.map(stop => {
17 return start + range * stop
18 })
19}
20
21export const defaultScale = generateScale(6, 100)
22// dim shifted 6% lighter
23export const dimScale = generateScale(12, 100)
24
25export function transparentifyColor(color: string, alpha: number) {
26 if (color.startsWith('hsl(')) {
27 return 'hsla(' + color.slice('hsl('.length, -1) + `, ${alpha})`
28 } else if (color.startsWith('rgb(')) {
29 return 'rgba(' + color.slice('rgb('.length, -1) + `, ${alpha})`
30 } else if (color.startsWith('#')) {
31 if (color.length === 7) {
32 const alphaHex = Math.round(alpha * 255).toString(16)
33 // Per MDN: If there is only one number, it is duplicated: e means ee
34 // https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color
35 return color.slice(0, 7) + alphaHex.padStart(2, alphaHex)
36 } else if (color.length === 4) {
37 // convert to 6-digit hex before adding alpha
38 const [r, g, b] = color.slice(1).split('')
39 const alphaHex = Math.round(alpha * 255).toString(16)
40 return `#${r.repeat(2)}${g.repeat(2)}${b.repeat(2)}${alphaHex.padStart(
41 2,
42 alphaHex,
43 )}`
44 }
45 } else {
46 logger.warn(`Could not make '${color}' transparent`)
47 }
48 return color
49}