66 lines
1.2 KiB
JavaScript
66 lines
1.2 KiB
JavaScript
import gsap from 'gsap'
|
|
|
|
const generateShades = (colors) => {
|
|
const result = {}
|
|
|
|
for (const [key, value] of Object.entries(colors)) {
|
|
result[key] = value
|
|
|
|
for (let i = 0; i <= 19; i++) {
|
|
const split = gsap.utils.splitColor(value)
|
|
const rgb = split.toString().replaceAll(',', ' ')
|
|
const alpha = parseInt((((i / 20) * 0xff) / 255) * 100)
|
|
|
|
result[`${key}-${i * 5}`] = `rgb(${rgb} / ${alpha}%)`
|
|
}
|
|
}
|
|
|
|
return result
|
|
}
|
|
|
|
const colors = generateShades({
|
|
black: '#0B0D0B',
|
|
white: '#FCFCF6',
|
|
purple: '#541CDC',
|
|
})
|
|
|
|
const themes = {
|
|
light: {
|
|
bg: colors.white,
|
|
fg: colors.black,
|
|
contrast: colors.purple,
|
|
},
|
|
dark: {
|
|
bg: colors.black,
|
|
fg: colors.white,
|
|
contrast: colors.purple,
|
|
},
|
|
}
|
|
|
|
const breakpoints = {
|
|
mobile: 800,
|
|
}
|
|
|
|
const viewports = {
|
|
mobile: {
|
|
width: 480,
|
|
height: 872,
|
|
},
|
|
desktop: {
|
|
width: 1920,
|
|
height: 1080,
|
|
},
|
|
}
|
|
|
|
const scrollSmoothing = 0.7
|
|
|
|
export { colors, themes, breakpoints, viewports, scrollSmoothing }
|
|
|
|
export default {
|
|
colors,
|
|
themes,
|
|
breakpoints,
|
|
viewports,
|
|
scrollSmoothing,
|
|
}
|