style: Change button background color

0xwonj · Apr 4, 2024 · fc84f28 · fc84f28
1 parent 272d082
commit fc84f28
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 37 deletions.
diff --git a/components/LinkSection.js b/components/LinkSection.js
@@ -21,7 +21,7 @@ export default function LinkSection(props) {
               href={link.link}
               target={link.target}
               key={linkIndex}
-              className={`${color}BtnBorder relative grid place-items-center rounded-lg ${colorClasses['button-bg']} ${colorClasses['hover-bg-950']} p-4 text-blue-100 ${colorClasses['hover-200']}`}
+              className={`${color}BtnBorder relative grid place-items-center rounded-lg ${colorClasses['button-bg']} ${colorClasses['hover-button-bg']} p-4 text-blue-100 ${colorClasses['hover-200']}`}
             >
               <i
                 className={`absolute left-4 top-1/2 -translate-y-1/2 text-xl ${

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -21,9 +21,15 @@ export default {
   },
   plugins: [typography],
   safelist: [
-    'bg-[#090d2a]', // blue
-    'bg-[#2a1b10]', // orange
-    'bg-[#1d1329]', // purple
+    /** @blue */
+    'bg-[#111e62]',
+    'hover:bg-[#080e2e]',
+    /** @purple */
+    'bg-[#32214e]',
+    'hover:bg-[#181026]',
+    /** @orange */
+    'bg-[#a14200]',
+    'hover:bg-[#502207]',
     {
       pattern:
         /text-(purple|pink|blue|orange)-(50|100|200|300|400|500|600|700)/,

diff --git a/utils/colors.js b/utils/colors.js
@@ -1,3 +1,20 @@
+const blueClasses = {
+  50: 'text-blue-50',
+  100: 'text-blue-100',
+  200: 'text-blue-200',
+  300: 'text-blue-300',
+  400: 'text-blue-400',
+  500: 'text-blue-500',
+  'hover-200': 'hover:text-blue-200',
+  'hover-700': 'hover:text-blue-700',
+  'after-bg-500': 'after:bg-blue-500',
+  'hover-bg-950': 'hover:bg-blue-950',
+  'border-100': 'border-blue-100',
+  'border-400': 'border-blue-400',
+  'button-bg': 'bg-[#111e62]',
+  'hover-button-bg': 'hover:bg-[#080e2e]',
+};
+
 const purpleClasses = {
   50: 'text-purple-50',
   100: 'text-purple-100',
@@ -11,7 +28,25 @@ const purpleClasses = {
   'hover-bg-950': 'hover:bg-purple-950',
   'border-100': 'border-purple-100',
   'border-400': 'border-purple-400',
-  'button-bg': 'bg-[#1d1329]',
+  'button-bg': 'bg-[#32214e]',
+  'hover-button-bg': 'hover:bg-[#181026]',
+};
+
+const orangeClasses = {
+  50: 'text-orange-50',
+  100: 'text-orange-100',
+  200: 'text-orange-200',
+  300: 'text-orange-300',
+  400: 'text-orange-400',
+  500: 'text-orange-500',
+  'hover-200': 'hover:text-orange-200',
+  'hover-700': 'hover:text-orange-700',
+  'after-bg-500': 'after:bg-orange-500',
+  'hover-bg-950': 'hover:bg-orange-950',
+  'border-100': 'border-orange-100',
+  'border-400': 'border-orange-400',
+  'button-bg': 'bg-[#a14200]',
+  'hover-button-bg': 'hover:bg-[#502207]',
 };
 
 const pinkClasses = {
@@ -28,38 +63,7 @@ const pinkClasses = {
   'border-100': 'border-pink-100',
   'border-400': 'border-pink-400',
   'button-bg': 'bg-pink-950',
-};
-
-const blueClasses = {
-  50: 'text-blue-50',
-  100: 'text-blue-100',
-  200: 'text-blue-200',
-  300: 'text-blue-300',
-  400: 'text-blue-400',
-  500: 'text-blue-500',
-  'hover-200': 'hover:text-blue-200',
-  'hover-700': 'hover:text-blue-700',
-  'after-bg-500': 'after:bg-blue-500',
-  'hover-bg-950': 'hover:bg-blue-950',
-  'border-100': 'border-blue-100',
-  'border-400': 'border-blue-400',
-  'button-bg': 'bg-[#090d2a]',
-};
-
-const orangeClasses = {
-  50: 'text-orange-50',
-  100: 'text-orange-100',
-  200: 'text-orange-200',
-  300: 'text-orange-300',
-  400: 'text-orange-400',
-  500: 'text-orange-500',
-  'hover-200': 'hover:text-orange-200',
-  'hover-700': 'hover:text-orange-700',
-  'after-bg-500': 'after:bg-orange-500',
-  'hover-bg-950': 'hover:bg-orange-950',
-  'border-100': 'border-orange-100',
-  'border-400': 'border-orange-400',
-  'button-bg': 'bg-[#2a1b10]',
+  'hover-button-bg': 'hover:bg-[#111111]',
 };
 
 export const colorMappings = {