I want to convert linear-gradient keywords like to right & to bottom into 90deg & 180deg.
I have only managed to find out 4 keywords values to degrees:
const orientationToAngle = new Map<string, string>([
['to top', '0deg'],
['to right', '90deg'],
['to bottom', '180deg'],
['to left', '270deg'],
])
This is a part of a function that takes in colors, positions, orientation, and angle and returns a linear-gradient:
export const colorsToLinearGradient = (
colors: string[],
positions: number[],
orientation?: string,
angle?: string
) => {
const stopStrings = colors.map((color, i) => {
if (i === 0) return `${color} 0%`
if (i === colors.length - 1) return `${color} 100%`
return `${color} ${positions[i]}%`
})
const orientationToAngle = new Map<string, string>([
['to top', '0deg'],
['to right', '90deg'],
['to bottom', '180deg'],
['to left', '270deg'],
])
const angleValue = angle || orientationToAngle.get(orientation || 'to bottom')
return `linear-gradient(${angleValue}, ${stopStrings.join(', ')})`
}
I need to figure out how to add in the rest of the values like: to top right, to top left, to bottom right, to bottom left? I don't know if I'm missing any other keywords.
So would love to know the angle equivalents of such keywords?