detail page port

libs/theme.js

@@ -1,25 +1,39 @@
-const colors = {
-    black: '#181818',
-    white: '#D5D5D5',
-    'grey-100': '#747474',
-    green: '#87FF5B',
-    blue: '#5B92FF',
-    purple: '#94079E',
-    red: '#D40202',
+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 = {
-    dark: {
-        bg: colors.black,
-        fg: colors.white,
-        accent: colors.green,
-        link: colors.blue,
-    },
     light: {
         bg: colors.white,
         fg: colors.black,
-        accent: colors.purple,
-        link: colors.blue,
+        contrast: colors.purple,
+    },
+    dark: {
+        bg: colors.black,
+        fg: colors.white,
+        contrast: colors.purple,
     },
 }
 
@@ -29,20 +43,23 @@ const breakpoints = {
 
 const viewports = {
     mobile: {
-        width: 440,
-        height: 956,
+        width: 480,
+        height: 872,
     },
     desktop: {
-        width: 1728,
-        height: 1117,
+        width: 1920,
+        height: 1080,
     },
 }
 
-export { colors, themes, breakpoints, viewports }
+const scrollSmoothing = 0.7
+
+export { colors, themes, breakpoints, viewports, scrollSmoothing }
 
 export default {
     colors,
     themes,
     breakpoints,
     viewports,
+    scrollSmoothing,
 }