Color Utils fixes and more

18 files changed, 190 insertions, 125 deletions

diff --git a/src/main/java/cc/polyfrost/oneconfig/config/OneConfigConfig.java b/src/main/java/cc/polyfrost/oneconfig/config/OneConfigConfig.java
index 5714f11..376f221 100644
--- a/src/main/java/cc/polyfrost/oneconfig/config/OneConfigConfig.java
+++ b/src/main/java/cc/polyfrost/oneconfig/config/OneConfigConfig.java
@@ -1,9 +1,9 @@
 package cc.polyfrost.oneconfig.config;
 
-import cc.polyfrost.oneconfig.config.interfaces.Config;
 import cc.polyfrost.oneconfig.config.core.OneColor;
-import com.google.gson.JsonParser;
 import cc.polyfrost.oneconfig.config.data.Mod;
+import cc.polyfrost.oneconfig.config.interfaces.Config;
+import com.google.gson.JsonParser;
 
 import java.awt.*;
 import java.io.*;
@@ -23,7 +23,7 @@ public class OneConfigConfig extends Config {
     // the color library
     public static final int TRANSPARENT = new Color(0, 0, 0, 0).getRGB();                // Transparent
 
-    public static final int BLACK = new Color(0,0,0,255).getRGB();                     // Black
+    public static final int BLACK = new Color(0, 0, 0, 255).getRGB();                     // Black
     public static final int GRAY_900 = new Color(13, 14, 15, 255).getRGB();           // Gray 900
     public static final int GRAY_900_80 = new Color(13, 14, 15, 204).getRGB();         // Gray 900 80%
     public static final int GRAY_800 = new Color(21, 22, 23, 255).getRGB();           // Gray 800
@@ -31,34 +31,33 @@ public class OneConfigConfig extends Config {
     public static final int GRAY_600 = new Color(42, 44, 48, 255).getRGB();           // Gray 600
     public static final int GRAY_500 = new Color(49, 51, 56, 255).getRGB();           // Gray 500         // button sidebar hover, button gray normal
     public static final int GRAY_500_80 = new Color(49, 51, 56, 204).getRGB();        // Gray 500 80%     // button sidebar pressed
-
     public static final int GRAY_400 = new Color(55, 59, 69, 255).getRGB();           // Gray 400
     public static final int GRAY_300 = new Color(73, 79, 92, 255).getRGB();           // Gray 300         // button gray hover
-    public static final int GRAY_200 = new Color(100, 107, 125, 255).getRGB();        // Gray 200
     public static final int GRAY_400_80 = new Color(55, 59, 69, 204).getRGB();        // Gray 400 80%     // button gray pressed
     public static final int PRIMARY_800 = new Color(13, 51, 128, 255).getRGB();          // Blue 800
     public static final int PRIMARY_700 = new Color(18, 71, 178, 255).getRGB();          // Blue 700
     public static final int PRIMARY_700_80 = new Color(18, 71, 178, 204).getRGB();       // Blue 700 80%
     public static final int PRIMARY_600 = new Color(20, 82, 204, 255).getRGB();          // Blue 600         // button blue normal
-    public static final int PRIMARY_600_80 = new Color(20, 82, 204, 204).getRGB();       // Blue 600 80%     // button blue click
     public static final int PRIMARY_500 = new Color(25, 103, 255, 255).getRGB();         // Blue 500         // button blue hover
     public static final int PRIMARY_400 = new Color(48, 129, 242, 255).getRGB();
-    public static final int PRIMARY_400_80 = new Color(48, 129, 242, 204).getRGB();
     public static final int WHITE_50 = new Color(255, 255, 255, 127).getRGB();        // White 60%
     public static final int WHITE_60 = new Color(255, 255, 255, 153).getRGB();        // White 60%
     public static final int WHITE_80 = new Color(255, 255, 255, 204).getRGB();        // White 80%
     public static final int WHITE_90 = new Color(255, 255, 255, 229).getRGB();        // White 90%
     public static final int WHITE_95 = new Color(255, 255, 255, 242).getRGB();        // White 90%
     public static final int WHITE = new Color(255, 255, 255, 255).getRGB();           // White 100%
-
     public static final int SUCCESS_600 = new Color(3, 152, 85).getRGB();
     public static final int SUCCESS_700 = new Color(2, 121, 72).getRGB();
-
     public static final int WARNING_500 = new Color(247, 144, 9).getRGB();
     public static final int WARNING_600 = new Color(220, 104, 3).getRGB();
-
+    public static final int ERROR_600_80 = new Color(217, 32, 32, 204).getRGB();
     public static final int ERROR_600 = new Color(217, 32, 32).getRGB();
     public static final int ERROR_700 = new Color(180, 24, 24).getRGB();         // Red 700
+    public static final int ERROR_800 = new Color(145, 24, 24).getRGB();         // Red 800
+    public static final int ERROR_800_80 = new Color(145, 24, 24, 204).getRGB();         // Red 800
+    public static final int ERROR_300 = new Color(253, 155, 155).getRGB();
+    public static final int ERROR_300_80 = new Color(253, 155, 155, 204).getRGB();
+
 
     public static boolean ROUNDED_CORNERS = true;
     public static float CORNER_RADIUS_WIN = 20f;
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/SideBar.java b/src/main/java/cc/polyfrost/oneconfig/gui/SideBar.java
index bc18253..5729de3 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/SideBar.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/SideBar.java
@@ -7,6 +7,7 @@ import cc.polyfrost.oneconfig.gui.pages.ModsPage;
 import cc.polyfrost.oneconfig.lwjgl.RenderManager;
 import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
 import cc.polyfrost.oneconfig.lwjgl.image.SVGs;
+import cc.polyfrost.oneconfig.utils.ColorUtils;
 import cc.polyfrost.oneconfig.utils.MathUtils;
 import cc.polyfrost.oneconfig.libs.universal.UScreen;
 
@@ -21,25 +22,25 @@ public class SideBar {
     private float targetY = 0, currentY = 0;
 
     public SideBar() {
-        btnList.add(new BasicButton(192, SIZE_36, "Dashboard", SVGs.DASHBOARD, null, ALIGNMENT_LEFT, -2));
+        btnList.add(new BasicButton(192, SIZE_36, "Dashboard", SVGs.DASHBOARD, null, ALIGNMENT_LEFT, ColorUtils.TERTIARY));
         btnList.get(0).setClickAction(new HomePage());
-        btnList.add(new BasicButton(192, SIZE_36, "Global Search", SVGs.SEARCH, null, ALIGNMENT_LEFT, -2));
-        btnList.add(new BasicButton(192, SIZE_36, "Screenshots", SVGs.IMAGE, null, ALIGNMENT_LEFT, -2));
-        btnList.add(new BasicButton(192, SIZE_36, "Preferences", SVGs.SETTINGS, null, ALIGNMENT_LEFT, -2));
-        btnList.add(new BasicButton(192, 36, "Mods", SVGs.MODS, null, ALIGNMENT_LEFT, -2));
+        btnList.add(new BasicButton(192, SIZE_36, "Global Search", SVGs.SEARCH, null, ALIGNMENT_LEFT, ColorUtils.TERTIARY));
+        btnList.add(new BasicButton(192, SIZE_36, "Screenshots", SVGs.IMAGE, null, ALIGNMENT_LEFT, ColorUtils.TERTIARY));
+        btnList.add(new BasicButton(192, SIZE_36, "Preferences", SVGs.SETTINGS, null, ALIGNMENT_LEFT, ColorUtils.TERTIARY));
+        btnList.add(new BasicButton(192, 36, "Mods", SVGs.MODS, null, ALIGNMENT_LEFT, ColorUtils.TERTIARY));
         btnList.get(4).setClickAction(new ModsPage());
-        btnList.add(new BasicButton(192, SIZE_36, "Performance", SVGs.PERFORMANCE, null, ALIGNMENT_LEFT, -2));
-        btnList.add(new BasicButton(192, SIZE_36, "Profiles", SVGs.PROFILES, null, ALIGNMENT_LEFT, -2));
-        btnList.add(new BasicButton(192, SIZE_36, "Updates", SVGs.UPDATE, null, ALIGNMENT_LEFT, -2));
-        btnList.add(new BasicButton(192, SIZE_36, "Themes Library", SVGs.THEME, null, ALIGNMENT_LEFT, -2));
-        btnList.add(new BasicButton(192, SIZE_36, "Themes Browser", SVGs.SEARCH, null, ALIGNMENT_LEFT, -2));
-        btnList.add(new BasicButton(192, SIZE_36, "Packs Library", SVGs.BOX, null, ALIGNMENT_LEFT, -2));
-        btnList.add(new BasicButton(192, SIZE_36, "Packs Browser", SVGs.SEARCH, null, ALIGNMENT_LEFT, -2));
-        btnList.add(new BasicButton(192, SIZE_36, "Close", SVGs.X_CIRCLE, null, ALIGNMENT_LEFT, -1));
+        btnList.add(new BasicButton(192, SIZE_36, "Performance", SVGs.PERFORMANCE, null, ALIGNMENT_LEFT, ColorUtils.TERTIARY));
+        btnList.add(new BasicButton(192, SIZE_36, "Profiles", SVGs.PROFILES, null, ALIGNMENT_LEFT, ColorUtils.TERTIARY));
+        btnList.add(new BasicButton(192, SIZE_36, "Updates", SVGs.UPDATE, null, ALIGNMENT_LEFT, ColorUtils.TERTIARY));
+        btnList.add(new BasicButton(192, SIZE_36, "Themes Library", SVGs.THEME, null, ALIGNMENT_LEFT, ColorUtils.TERTIARY));
+        btnList.add(new BasicButton(192, SIZE_36, "Themes Browser", SVGs.SEARCH, null, ALIGNMENT_LEFT, ColorUtils.TERTIARY));
+        btnList.add(new BasicButton(192, SIZE_36, "Packs Library", SVGs.BOX, null, ALIGNMENT_LEFT, ColorUtils.TERTIARY));
+        btnList.add(new BasicButton(192, SIZE_36, "Packs Browser", SVGs.SEARCH, null, ALIGNMENT_LEFT, ColorUtils.TERTIARY));
+        btnList.add(new BasicButton(192, SIZE_36, "Close", SVGs.X_CIRCLE, null, ALIGNMENT_LEFT, ColorUtils.SECONDARY_TRANSPARENT));
         btnList.get(12).setClickAction(() -> UScreen.displayScreen(null));
-        btnList.add(new BasicButton(192, SIZE_36, "Minimize", SVGs.MINIMISE, null, ALIGNMENT_LEFT, -1));
+        btnList.add(new BasicButton(192, SIZE_36, "Minimize", SVGs.MINIMISE, null, ALIGNMENT_LEFT, ColorUtils.SECONDARY_TRANSPARENT));
         btnList.get(13).setClickAction(() -> UScreen.displayScreen(null));
-        btnList.add(new BasicButton(192, SIZE_36, "Edit HUD", SVGs.HUD, null, ALIGNMENT_LEFT, -1));
+        btnList.add(new BasicButton(192, SIZE_36, "Edit HUD", SVGs.HUD, null, ALIGNMENT_LEFT, ColorUtils.SECONDARY_TRANSPARENT));
         btnList.get(14).setClickAction(() -> UScreen.displayScreen(new HudGui()));
     }
 
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicButton.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicButton.java
index a4b8ecf..579841e 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicButton.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicButton.java
@@ -1,7 +1,7 @@
 package cc.polyfrost.oneconfig.gui.elements;
 
-import cc.polyfrost.oneconfig.gui.OneConfigGui;
 import cc.polyfrost.oneconfig.config.OneConfigConfig;
+import cc.polyfrost.oneconfig.gui.OneConfigGui;
 import cc.polyfrost.oneconfig.gui.pages.Page;
 import cc.polyfrost.oneconfig.lwjgl.RenderManager;
 import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
@@ -38,14 +38,14 @@ public class BasicButton extends BasicElement {
 
     public BasicButton(int width, int size, String text, SVGs icon1, SVGs icon2, int align, int colorPalette) {
         super(width, 32, colorPalette, true);
-        if(text != null) this.text = text;
+        if (text != null) this.text = text;
         if (icon1 != null) this.icon1 = icon1;
         if (icon2 != null) this.icon2 = icon2;
         this.colorPalette = colorPalette;
         this.alignment = align;
         this.cornerRadius = size == SIZE_48 ? 16f : 12f;
         this.xSpacing = size == SIZE_48 ? 12 : 8;
-        if(size == SIZE_36 || size == SIZE_40) {
+        if (size == SIZE_36 || size == SIZE_40) {
             this.xPadding = 16;
         } else this.xPadding = size == SIZE_48 ? 20 : 12;
         this.height = size;
@@ -79,8 +79,8 @@ public class BasicButton extends BasicElement {
         final float middle = x + width / 2f;
         final float middleYIcon = y + height / 2f - iconSize / 2f;
         final float middleYText = y + height / 2f + fontSize / 8f;
-        if(this.text != null) {
-            if (this.colorPalette == -2) {
+        if (this.text != null) {
+            if (this.colorPalette == ColorUtils.TERTIARY) {
                 textColor = OneConfigConfig.WHITE_80;
                 if (hovered) textColor = OneConfigConfig.WHITE;
                 if (clicked) textColor = OneConfigConfig.WHITE_80;
@@ -88,67 +88,72 @@ public class BasicButton extends BasicElement {
             }
             contentWidth += RenderManager.getTextWidth(vg, text, fontSize, Fonts.MEDIUM);
         }
-        if(alignment == ALIGNMENT_CENTER) {
-                if (icon1 != null) {
-                    contentWidth += iconSize + xSpacing;
-                }
-                if (icon2 != null) {
-                    contentWidth += iconSize + xSpacing;
-                }
-                if(text != null) {
-                    RenderManager.drawString(vg, text, middle - contentWidth / 2 + (icon1 == null ? 0 : iconSize + xSpacing), middleYText, textColor, fontSize, Fonts.MEDIUM);
-                }
-                if(icon1 != null) {
-                    RenderManager.drawSvg(vg, icon1, middle - contentWidth / 2, middleYIcon, iconSize, iconSize);
-                }
-                if(icon2 != null) {
-                    RenderManager.drawSvg(vg, icon2, middle + contentWidth / 2 - iconSize, middleYIcon, iconSize, iconSize);
-                }
+        if (alignment == ALIGNMENT_CENTER) {
+            if(icon1 != null && icon2 == null && text == null) {
+                RenderManager.drawSvg(vg, icon1, middle - iconSize / 2f, middleYIcon, iconSize, iconSize);
+                this.update(x, y);
+                return;
+            }
+            if (icon1 != null) {
+                contentWidth += iconSize + xSpacing;
+            }
+            if (icon2 != null) {
+                contentWidth += iconSize + xSpacing;
+            }
+            if (text != null) {
+                RenderManager.drawString(vg, text, middle - contentWidth / 2 + (icon1 == null ? 0 : iconSize + xSpacing), middleYText, textColor, fontSize, Fonts.MEDIUM);
+            }
+            if (icon1 != null) {
+                RenderManager.drawSvg(vg, icon1, middle - contentWidth / 2, middleYIcon, iconSize, iconSize);
+            }
+            if (icon2 != null) {
+                RenderManager.drawSvg(vg, icon2, middle + contentWidth / 2 - iconSize, middleYIcon, iconSize, iconSize);
+            }
             this.update(x, y);
             return;
         }
-        if(alignment == ALIGNMENT_JUSTIFIED) {
-            if(text != null) {
+        if (alignment == ALIGNMENT_JUSTIFIED) {
+            if (text != null) {
                 RenderManager.drawString(vg, text, middle - contentWidth / 2, middleYText, textColor, fontSize, Fonts.MEDIUM);
             }
-            if(icon1 != null) {
+            if (icon1 != null) {
                 RenderManager.drawSvg(vg, icon1, x + xSpacing, middleYIcon, iconSize, iconSize);
             }
-            if(icon2 != null) {
+            if (icon2 != null) {
                 RenderManager.drawSvg(vg, icon2, x + width - xSpacing - iconSize, middleYIcon, iconSize, iconSize);
             }
             this.update(x, y);
             return;
         }
-        if(alignment == ALIGNMENT_LEFT) {
+        if (alignment == ALIGNMENT_LEFT) {
             contentWidth = xSpacing;
-            if(icon1 != null) {
+            if (icon1 != null) {
                 RenderManager.drawSvg(vg, icon1, x + contentWidth, middleYIcon, iconSize, iconSize);
                 contentWidth += iconSize + xSpacing;
             }
-            if(text != null) {
+            if (text != null) {
                 RenderManager.drawString(vg, text, x + contentWidth, middleYText, textColor, fontSize, Fonts.MEDIUM);
                 contentWidth += RenderManager.getTextWidth(vg, text, fontSize, Fonts.MEDIUM) + xSpacing;
             }
-            if(icon2 != null) {
+            if (icon2 != null) {
                 RenderManager.drawSvg(vg, icon2, x + contentWidth, middleYIcon, iconSize, iconSize);
             }
             this.update(x, y);
             return;
         }
-        if(alignment == ALIGNMENT_RIGHT) {
+        if (alignment == ALIGNMENT_RIGHT) {
             contentWidth = width - xSpacing;
-            if(icon2 != null) {
+            if (icon2 != null) {
                 contentWidth -= iconSize;
                 RenderManager.drawSvg(vg, icon2, x + contentWidth, middleYIcon, iconSize, iconSize);
                 contentWidth -= xSpacing;
             }
-            if(text != null) {
+            if (text != null) {
                 contentWidth -= RenderManager.getTextWidth(vg, text, fontSize, Fonts.MEDIUM);
                 RenderManager.drawString(vg, text, x + contentWidth, middleYText, textColor, fontSize, Fonts.MEDIUM);
                 contentWidth -= xSpacing;
             }
-            if(icon1 != null) {
+            if (icon1 != null) {
                 contentWidth -= iconSize;
                 RenderManager.drawSvg(vg, icon1, x + contentWidth, middleYIcon, iconSize, iconSize);
             }
@@ -171,7 +176,7 @@ public class BasicButton extends BasicElement {
     public void update(int x, int y) {
         super.update(x, y);
         if (hoverFx) {
-            if (colorPalette == -2) {
+            if (colorPalette == ColorUtils.TERTIARY) {
                 currentColor = OneConfigConfig.TRANSPARENT;
                 return;
             }
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicElement.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicElement.java
index 887d8d2..f6c9e35 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicElement.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/BasicElement.java
@@ -31,7 +31,7 @@ public class BasicElement {
     }
 
     public BasicElement(int width, int height, boolean hoverFx) {
-        this(width, height, -1, hoverFx, 12f);
+        this(width, height, ColorUtils.TRANSPARENT, hoverFx, 12f);
     }
 
 
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java
index 3607d24..e85e223 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/ColorSelector.java
@@ -9,6 +9,7 @@ import cc.polyfrost.oneconfig.lwjgl.RenderManager;
 import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
 import cc.polyfrost.oneconfig.lwjgl.image.Images;
 import cc.polyfrost.oneconfig.lwjgl.image.SVGs;
+import cc.polyfrost.oneconfig.utils.ColorUtils;
 import cc.polyfrost.oneconfig.utils.InputUtils;
 import cc.polyfrost.oneconfig.utils.InternetUtils;
 import cc.polyfrost.oneconfig.utils.MathUtils;
@@ -28,11 +29,11 @@ public class ColorSelector {
     private final ArrayList<BasicElement> buttons = new ArrayList<>();
     private final BasicElement closeBtn = new BasicElement(32, 32, false);
 
-    private final BasicElement copyBtn = new BasicElement(32, 32, 2, true);
-    private final BasicElement pasteBtn = new BasicElement(32, 32, 2, true);
-    private final BasicButton guideBtn = new BasicButton(112, 32, "Guide", null, null, 0, BasicButton.ALIGNMENT_CENTER);
-    private final BasicElement faveBtn = new BasicElement(32, 32, 2, true);
-    private final BasicElement recentBtn = new BasicElement(32, 32, 2, true);
+    private final BasicButton copyBtn = new BasicButton(32, 32, SVGs.COPY, BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY);
+    private final BasicButton pasteBtn = new BasicButton(32, 32, SVGs.PASTE, BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY);
+    private final BasicButton guideBtn = new BasicButton(112, 32, "Guide", SVGs.HELP_CIRCLE, SVGs.POP_OUT, BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY);
+    private final BasicButton faveBtn = new BasicButton(32, 32, SVGs.HEART_OUTLINE, BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY);
+    private final BasicButton recentBtn = new BasicButton(32, 32, SVGs.HISTORY, BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY);
 
     private final NumberInputField hueInput = new NumberInputField(90, 32, 0, 0, 360, 1);
     private final NumberInputField saturationInput = new NumberInputField(90, 32, 100, 0, 100, 1);
@@ -51,9 +52,9 @@ public class ColorSelector {
 
     public ColorSelector(OneColor color, int mouseX, int mouseY) {
         this.color = color;
-        buttons.add(new BasicElement(124, 28, 2, true, 10f));
-        buttons.add(new BasicElement(124, 28, 2, true, 10f));
-        buttons.add(new BasicElement(124, 28, 2, true, 10f));
+        buttons.add(new BasicElement(124, 28, ColorUtils.SECONDARY, true, 10f));
+        buttons.add(new BasicElement(124, 28, ColorUtils.SECONDARY, true, 10f));
+        buttons.add(new BasicElement(124, 28, ColorUtils.SECONDARY, true, 10f));
         hueInput.setCurrentValue(color.getHue());
         saturationInput.setCurrentValue(color.getSaturation());
         brightnessInput.setCurrentValue(color.getBrightness());
@@ -138,9 +139,7 @@ public class ColorSelector {
 
         // TODO favorite stuff
         faveBtn.draw(vg, x + 16, y + 672);
-        RenderManager.drawSvg(vg, SVGs.HEART_OUTLINE, x + 23, y + 679, 18, 18);
         recentBtn.draw(vg, x + 16, y + 720);
-        RenderManager.drawSvg(vg, SVGs.HISTORY, x + 23, y + 727, 18, 18);
         for(int i = 0; i < 7; i++) {
             favoriteColors.get(i).draw(vg, x + 104 + i * 44, y + 672);
         }
@@ -188,12 +187,9 @@ public class ColorSelector {
 
         copyBtn.draw(vg, x + 204, y + 624);
         pasteBtn.draw(vg, x + 244, y + 624);
-        RenderManager.drawSvg(vg, SVGs.COPY, x + 211, y + 631, 18, 18);
-        RenderManager.drawSvg(vg, SVGs.PASTE, x + 251, y + 631, 18, 18);
+
 
         guideBtn.draw(vg, x + 288, y + 624);
-        RenderManager.drawSvg(vg, SVGs.HELP_CIRCLE, x + 301, y + 631, 18, 18);
-        RenderManager.drawSvg(vg, SVGs.POP_OUT, x + 369, y + 631, 18, 18);
 
 
         boolean isMouseDown = Mouse.isButtonDown(0);
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/ModCard.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/ModCard.java
index 5853585..c60286d 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/ModCard.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/ModCard.java
@@ -63,12 +63,12 @@ public class ModCard extends BasicElement {
         super.update(x, y);
         isHoveredMain = InputUtils.isAreaHovered(x, y, width, 87);
         boolean isHoveredSecondary = InputUtils.isAreaHovered(x, y + 87, width - 32, 32) && !disabled;
-        colorGray = ColorUtils.getColor(colorGray, 0, isHoveredMain, clicked && isHoveredMain);
+        colorGray = ColorUtils.getColor(colorGray, ColorUtils.SECONDARY, isHoveredMain, clicked && isHoveredMain);
         if (active && !disabled) {
-            colorPrimary = ColorUtils.getColor(colorPrimary, 1, isHoveredSecondary, clicked && isHoveredSecondary);
-        } else
-            colorPrimary = ColorUtils.smoothColor(colorPrimary, OneConfigConfig.GRAY_500, OneConfigConfig.GRAY_400, isHoveredSecondary, 20f);
-
+            colorPrimary = ColorUtils.getColor(colorPrimary, ColorUtils.PRIMARY, isHoveredSecondary, clicked && isHoveredSecondary);
+        } else {
+            colorPrimary = ColorUtils.getColor(colorPrimary, ColorUtils.SECONDARY, isHoveredSecondary, false);
+        }
         if (clicked && isHoveredMain) {
             if (!active) toggled = false;
         }
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigButton.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigButton.java
index 3caa51f..a0ba444 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigButton.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigButton.java
@@ -5,6 +5,7 @@ import cc.polyfrost.oneconfig.config.interfaces.BasicOption;
 import cc.polyfrost.oneconfig.gui.elements.BasicButton;
 import cc.polyfrost.oneconfig.lwjgl.RenderManager;
 import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.utils.ColorUtils;
 
 import java.lang.reflect.Field;
 
@@ -13,13 +14,13 @@ public class ConfigButton extends BasicOption {
 
     public ConfigButton(Runnable runnable, Object parent, String name, int size, String text) {
         super(null, parent, name, size);
-        this.button = new BasicButton(size == 1 ? 128 : 256, 32, text, BasicButton.ALIGNMENT_CENTER, 1);
+        this.button = new BasicButton(size == 1 ? 128 : 256, 32, text, BasicButton.ALIGNMENT_CENTER, ColorUtils.PRIMARY);
         this.button.setClickAction(runnable);
     }
 
     public ConfigButton(Field field, Object parent, String name, int size, String text) {
         super(field, parent, name, size);
-        this.button = new BasicButton(size == 1 ? 128 : 256, 32, text, BasicButton.ALIGNMENT_CENTER, 1);
+        this.button = new BasicButton(size == 1 ? 128 : 256, 32, text, BasicButton.ALIGNMENT_CENTER, ColorUtils.PRIMARY);
         this.button.setClickAction(getRunnableFromField(field, parent));
     }
 
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigCheckbox.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigCheckbox.java
index 764edcf..91c3cff 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigCheckbox.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigCheckbox.java
@@ -40,7 +40,7 @@ public class ConfigCheckbox extends BasicOption {
                 e.printStackTrace();
             }
         }
-        color = ColorUtils.smoothColor(color, OneConfigConfig.GRAY_600, OneConfigConfig.GRAY_400, hover, 40f);
+        color = ColorUtils.getColor(color, ColorUtils.SECONDARY, hover, false);
         if (percentOn != 1f) {       // performance
             RenderManager.drawRoundedRect(vg, x, y + 4, 24, 24, color, 6f);
             RenderManager.drawHollowRoundRect(vg, x, y + 4, 23.5f, 23.5f, OneConfigConfig.GRAY_300, 6f, 1f);        // the 0.5f is to make it look better ok
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDropdown.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDropdown.java
index 51d43ea..a36a829 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDropdown.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigDropdown.java
@@ -40,7 +40,7 @@ public class ConfigDropdown extends BasicOption { // TODO: remove dividers and f
         }
         if (opened) return;
 
-        backgroundColor = ColorUtils.smoothColor(backgroundColor, OneConfigConfig.GRAY_500, OneConfigConfig.GRAY_400, hovered, 100);
+        backgroundColor = ColorUtils.getColor(backgroundColor, ColorUtils.SECONDARY, hovered, false);
         int selected = 0;
         try {
             selected = (int) get();
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigKeyBind.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigKeyBind.java
index 898d6d7..905aabf 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigKeyBind.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigKeyBind.java
@@ -9,6 +9,7 @@ import cc.polyfrost.oneconfig.lwjgl.RenderManager;
 import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
 import cc.polyfrost.oneconfig.lwjgl.image.SVGs;
 import cc.polyfrost.oneconfig.libs.universal.UKeyboard;
+import cc.polyfrost.oneconfig.utils.ColorUtils;
 
 import java.lang.reflect.Field;
 
@@ -18,7 +19,7 @@ public class ConfigKeyBind extends BasicOption {
 
     public ConfigKeyBind(Field field, Object parent, String name, int size) {
         super(field, parent, name, size);
-        button = new BasicButton(256, 32, "", SVGs.KEYSTROKE, null, BasicButton.ALIGNMENT_LEFT, 0);
+        button = new BasicButton(256, 32, "", SVGs.KEYSTROKE, null, BasicButton.ALIGNMENT_LEFT, ColorUtils.SECONDARY);
         button.setToggleable(true);
     }
 
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigPageButton.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigPageButton.java
index edd44e1..61729b9 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigPageButton.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigPageButton.java
@@ -30,7 +30,7 @@ public class ConfigPageButton extends BasicOption {
         int height = description.equals("") ? 64 : 96;
         boolean hovered = InputUtils.isAreaHovered(x - 2, y, 1024, height) && isEnabled();
         boolean clicked = hovered && InputUtils.isClicked();
-        backgroundColor = ColorUtils.smoothColor(backgroundColor, OneConfigConfig.GRAY_500, OneConfigConfig.GRAY_400, hovered, 100);
+        backgroundColor = ColorUtils.getColor(backgroundColor, ColorUtils.SECONDARY, hovered, false);
 
         if (hovered && Mouse.isButtonDown(0)) RenderManager.setAlpha(vg, 0.8f);
         if (!isEnabled()) RenderManager.setAlpha(vg, 0.5f);
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigSwitch.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigSwitch.java
index 2fcf62e..f802680 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigSwitch.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/config/ConfigSwitch.java
@@ -28,7 +28,7 @@ public class ConfigSwitch extends BasicOption {
         }
         int x2 = x + 3 + (int) (percentOn * 18);
         boolean hovered = InputUtils.isAreaHovered(x, y, 42, 32);
-        colorDisabled = ColorUtils.smoothColor(colorDisabled, OneConfigConfig.GRAY_400, OneConfigConfig.GRAY_300, hovered, 40f);
+        colorDisabled = ColorUtils.getColor(colorDisabled, ColorUtils.SECONDARY, hovered, false);
         colorEnabled = ColorUtils.smoothColor(colorEnabled, OneConfigConfig.PRIMARY_600, OneConfigConfig.PRIMARY_500, hovered, 40f);
         if (!isEnabled()) RenderManager.setAlpha(vg, 0.5f);
         RenderManager.drawRoundedRect(vg, x, y + 4, 42, 24, colorDisabled, 12f);
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/elements/text/NumberInputField.java b/src/main/java/cc/polyfrost/oneconfig/gui/elements/text/NumberInputField.java
index 3b6fa43..925f61d 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/elements/text/NumberInputField.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/elements/text/NumberInputField.java
@@ -47,8 +47,8 @@ public class NumberInputField extends TextInputField {
         if (current == max) colorTop = OneConfigConfig.GRAY_500_80;
         if (current == min) colorBottom = OneConfigConfig.GRAY_500_80;
 
-        colorTop = ColorUtils.getColor(colorTop, 2, upArrow.isHovered(), upArrow.isClicked());
-        colorBottom = ColorUtils.getColor(colorBottom, 2, downArrow.isHovered(), downArrow.isClicked());
+        colorTop = ColorUtils.getColor(colorTop, ColorUtils.SECONDARY, upArrow.isHovered(), upArrow.isClicked());
+        colorBottom = ColorUtils.getColor(colorBottom, ColorUtils.SECONDARY, downArrow.isHovered(), downArrow.isClicked());
         if (upArrow.isClicked()) {
             current += step;
             if (current > max) current = max;
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/pages/CreditsPage.java b/src/main/java/cc/polyfrost/oneconfig/gui/pages/CreditsPage.java
index ec02dce..d6c00ab 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/pages/CreditsPage.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/pages/CreditsPage.java
@@ -1,5 +1,9 @@
 package cc.polyfrost.oneconfig.gui.pages;
 
+import cc.polyfrost.oneconfig.lwjgl.RenderManager;
+import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.lwjgl.image.SVGs;
+
 public class CreditsPage extends Page {
     CreditsPage() {
         super("Credits");
@@ -7,6 +11,31 @@ public class CreditsPage extends Page {
 
     @Override
     public void draw(long vg, int x, int y) {
+        RenderManager.drawSvg(vg, SVGs.ONECONFIG, x + 20f, y + 20f, 96, 96);
+        RenderManager.drawString(vg, "OneConfig", x + 130, y + 46, -1, 42, Fonts.BOLD);
+        RenderManager.drawString(vg, "ALPHA - By Polyfrost", x + 132, y + 76, -1, 18, Fonts.MEDIUM);
+        RenderManager.drawString(vg, "v0.1", x + 132, y + 96, -1, 18, Fonts.MEDIUM);
+
+        RenderManager.drawString(vg, "Development Team", x + 20, y + 180, -1, 24, Fonts.SEMIBOLD);
+        RenderManager.drawString(vg, " - MoonTidez - Founder and lead designer", x + 20, y + 205, -1, 12, Fonts.REGULAR);
+        RenderManager.drawString(vg, " - DeDiamondPro - Config backend, GUI frontend, HUD", x + 20, y + 220, -1, 12, Fonts.REGULAR);        // +15/line
+        RenderManager.drawString(vg, " - nextdaydelivery - GUI frontend, Render Manager, Utilities", x + 20, y + 235, -1, 12, Fonts.REGULAR);
+        RenderManager.drawString(vg, " - Wyvest - Gradle, Render Manager, VCAL, Utilities", x + 20, y + 250, -1, 12, Fonts.REGULAR);
+        RenderManager.drawString(vg, " - Ethan - Utilities", x + 20, y + 265, -1, 12, Fonts.REGULAR);
+
+        RenderManager.drawString(vg, "Libraries", x + 20, y + 318, -1, 24, Fonts.SEMIBOLD);
+        RenderManager.drawString(vg, " - LWJGLTwoPointFive (DJTheRedstoner) - LWJGL3 loading hack", x + 20, y + 340, -1, 12, Fonts.REGULAR);
+        RenderManager.drawString(vg, " - #getResourceAsStream (SpinyOwl) - IO Utility", x + 20, y + 355, -1, 12, Fonts.REGULAR);
+        RenderManager.drawString(vg, " - NanoVG (memononen) - NanoVG Library", x + 20, y + 370, -1, 12, Fonts.REGULAR);
+        RenderManager.drawString(vg, " - UniversalCraft (Sk1er LLC) - Multiversioning bindings", x + 20, y + 385, -1, 12, Fonts.REGULAR);
+        RenderManager.drawString(vg, " - Easing Functions (jesusgollonet)", x + 20, y + 400, -1, 12, Fonts.REGULAR);
+        RenderManager.drawString(vg, " - Quiltflower (W-OVERFLOW) - Gradle toolkit", x + 20, y + 415, -1, 12, Fonts.REGULAR);
+
+        RenderManager.drawString(vg, "Terms Of Service & Licensing", x + 20, y + 517, -1, 24, Fonts.SEMIBOLD);
+        RenderManager.drawString(vg, " - License Summary goes here", x + 20, y + 540, -1, 12, Fonts.REGULAR);
+
+        RenderManager.drawImage(vg, "https://i.insider.com/602ee9ced3ad27001837f2ac?width=700", x + 600, y + 20, 350, 263);
+
 
     }
 }
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/pages/HomePage.java b/src/main/java/cc/polyfrost/oneconfig/gui/pages/HomePage.java
index 050b055..f576b7b 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/pages/HomePage.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/pages/HomePage.java
@@ -8,25 +8,26 @@ import cc.polyfrost.oneconfig.config.core.OneColor;
 import cc.polyfrost.oneconfig.lwjgl.RenderManager;
 import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
 import cc.polyfrost.oneconfig.lwjgl.image.SVGs;
+import cc.polyfrost.oneconfig.utils.ColorUtils;
 import cc.polyfrost.oneconfig.utils.InputUtils;
 import cc.polyfrost.oneconfig.utils.InternetUtils;
 
 import java.awt.*;
 
 public class HomePage extends Page {
-    private final BasicButton socialsBtn = new BasicButton(184, 36, "Socials", SVGs.SHARE, SVGs.POP_OUT, BasicButton.ALIGNMENT_CENTER, 1);
-    private final BasicButton discordBtn = new BasicButton(184, 36, "Discord", SVGs.WEBSITE, SVGs.LINK_DIAGONAL, BasicButton.ALIGNMENT_CENTER, 1);
-    private final BasicButton webBtn = new BasicButton(184, 36, "Website", SVGs.WEBSITE, null, BasicButton.ALIGNMENT_CENTER, 1);
-    private final BasicButton creditsBtn = new BasicButton(184, 36, "Credits", SVGs.AUDIO_PLAY, SVGs.LINK_DIAGONAL, BasicButton.ALIGNMENT_CENTER, 0);
-    private final BasicButton guideBtn = new BasicButton(184, 36, "Online Guide", SVGs.HELP_CIRCLE, null, BasicButton.ALIGNMENT_CENTER, 0);
-    private final BasicButton button1 = new BasicButton(184, BasicButton.SIZE_32, "HELLO", SVGs.MICROSOFT_ICON, SVGs.AUDIO_PLAY, BasicButton.ALIGNMENT_CENTER, 1);
-    private final BasicButton button2 = new BasicButton(184, BasicButton.SIZE_36, "TESTING", SVGs.MICROSOFT_ICON, null, BasicButton.ALIGNMENT_LEFT, 1);
-    private final BasicButton button3 = new BasicButton(184, BasicButton.SIZE_40, "BOBFISH", SVGs.MICROSOFT_ICON, null, BasicButton.ALIGNMENT_CENTER, -2);
+    private final BasicButton socialsBtn = new BasicButton(184, 36, "Socials", SVGs.SHARE, SVGs.POP_OUT, BasicButton.ALIGNMENT_CENTER, ColorUtils.PRIMARY);
+    private final BasicButton discordBtn = new BasicButton(184, 36, "Discord", SVGs.WEBSITE, SVGs.LINK_DIAGONAL, BasicButton.ALIGNMENT_CENTER, ColorUtils.PRIMARY);
+    private final BasicButton webBtn = new BasicButton(184, 36, "Website", SVGs.WEBSITE, null, BasicButton.ALIGNMENT_CENTER, ColorUtils.PRIMARY);
+    private final BasicButton creditsBtn = new BasicButton(184, 36, "Credits", SVGs.AUDIO_PLAY, SVGs.LINK_DIAGONAL, BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY);
+    private final BasicButton guideBtn = new BasicButton(184, 36, "Online Guide", SVGs.HELP_CIRCLE, null, BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY);
+    private final BasicButton button1 = new BasicButton(184, BasicButton.SIZE_32, "HELLO", SVGs.MICROSOFT_ICON, SVGs.AUDIO_PLAY, BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY_TRANSPARENT);
+    private final BasicButton button2 = new BasicButton(184, BasicButton.SIZE_36, "TESTING", SVGs.MICROSOFT_ICON, null, BasicButton.ALIGNMENT_LEFT, ColorUtils.PRIMARY_DESTRUCTIVE);
+    private final BasicButton button3 = new BasicButton(184, BasicButton.SIZE_40, "BOBFISH", SVGs.MICROSOFT_ICON, null, BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY_DESTRUCTIVE);
     private final BasicButton button4 = new BasicButton(184, BasicButton.SIZE_48, "THIS is cool", null, SVGs.AUDIO_PLAY, BasicButton.ALIGNMENT_CENTER, 1);
     private final BasicButton button5 = new BasicButton(184, BasicButton.SIZE_36, "dhwuai", SVGs.MICROSOFT_ICON, SVGs.AUDIO_PLAY, BasicButton.ALIGNMENT_JUSTIFIED, 1);
     private final BasicButton button6 = new BasicButton(184, BasicButton.SIZE_32, "yes", SVGs.MICROSOFT_ICON, SVGs.AUDIO_PLAY, BasicButton.ALIGNMENT_RIGHT, 1);
     private final BasicButton button7 = new BasicButton(184, BasicButton.SIZE_32, "HELLO", SVGs.MICROSOFT_ICON, SVGs.AUDIO_PLAY, BasicButton.ALIGNMENT_CENTER, 1);
-    private final BasicButton button8 = new BasicButton(184, BasicButton.SIZE_40, "HELLO", SVGs.MICROSOFT_ICON, SVGs.AUDIO_PLAY, BasicButton.ALIGNMENT_CENTER, 1);
+    private final BasicButton button8 = new BasicButton(184, BasicButton.SIZE_40, "HELLO", SVGs.MICROSOFT_ICON, SVGs.AUDIO_PLAY, BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY_DESTRUCTIVE);
 
 
     public HomePage() {
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/pages/ModConfigPage.java b/src/main/java/cc/polyfrost/oneconfig/gui/pages/ModConfigPage.java
index d024fb4..e3301bb 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/pages/ModConfigPage.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/pages/ModConfigPage.java
@@ -6,6 +6,7 @@ import cc.polyfrost.oneconfig.config.interfaces.BasicOption;
 import cc.polyfrost.oneconfig.gui.elements.BasicButton;
 import cc.polyfrost.oneconfig.lwjgl.RenderManager;
 import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.utils.ColorUtils;
 
 import java.util.ArrayList;
 
@@ -27,7 +28,7 @@ public class ModConfigPage extends Page {
         }
         if (page.categories.size() < 2) return;
         for (String category : page.categories.keySet()) {
-            BasicButton button = new BasicButton(0, SIZE_32, category, BasicButton.ALIGNMENT_CENTER, 0);
+            BasicButton button = new BasicButton(0, SIZE_32, category, BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY);
             button.setClickAction(() -> switchCategory(category));
             button.setToggleable(true);
             if (category.equals(selectedCategory)) button.setToggled(true);
diff --git a/src/main/java/cc/polyfrost/oneconfig/gui/pages/ModsPage.java b/src/main/java/cc/polyfrost/oneconfig/gui/pages/ModsPage.java
index 1065731..91b8d88 100644
--- a/src/main/java/cc/polyfrost/oneconfig/gui/pages/ModsPage.java
+++ b/src/main/java/cc/polyfrost/oneconfig/gui/pages/ModsPage.java
@@ -9,6 +9,7 @@ import cc.polyfrost.oneconfig.gui.elements.BasicButton;
 import cc.polyfrost.oneconfig.gui.elements.ModCard;
 import cc.polyfrost.oneconfig.lwjgl.RenderManager;
 import cc.polyfrost.oneconfig.lwjgl.font.Fonts;
+import cc.polyfrost.oneconfig.utils.ColorUtils;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -24,13 +25,13 @@ public class ModsPage extends Page {
         for (Mod modData : OneConfig.loadedMods) {
             modCards.add(OneConfigConfig.favoriteMods.contains(modData.name) ? 0 : modCards.size(), new ModCard(modData, modData.config == null || modData.config.enabled, false, OneConfigConfig.favoriteMods.contains(modData.name)));
         }
-        modCategories.add(new BasicButton(64, 32, "All", BasicButton.ALIGNMENT_CENTER, 0));
-        modCategories.add(new BasicButton(80, 32, "Combat", BasicButton.ALIGNMENT_CENTER, 0));
-        modCategories.add(new BasicButton(64, 32, "HUD", BasicButton.ALIGNMENT_CENTER, 0));
-        modCategories.add(new BasicButton(104, 32, "Utility & QoL", BasicButton.ALIGNMENT_CENTER, 0));
-        modCategories.add(new BasicButton(80, 32, "Hypixel", BasicButton.ALIGNMENT_CENTER, 0));
-        modCategories.add(new BasicButton(80, 32, "Skyblock", BasicButton.ALIGNMENT_CENTER, 0));
-        modCategories.add(new BasicButton(88, 32, "3rd Party", BasicButton.ALIGNMENT_CENTER, 0));
+        modCategories.add(new BasicButton(64, 32, "All", BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY));
+        modCategories.add(new BasicButton(80, 32, "Combat", BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY));
+        modCategories.add(new BasicButton(64, 32, "HUD", BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY));
+        modCategories.add(new BasicButton(104, 32, "Utility & QoL", BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY));
+        modCategories.add(new BasicButton(80, 32, "Hypixel", BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY));
+        modCategories.add(new BasicButton(80, 32, "Skyblock", BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY));
+        modCategories.add(new BasicButton(88, 32, "3rd Party", BasicButton.ALIGNMENT_CENTER, ColorUtils.SECONDARY));
         modCategories.get(0).setToggled(true);
         int i = 0;
         for(BasicButton button : modCategories) {
diff --git a/src/main/java/cc/polyfrost/oneconfig/utils/ColorUtils.java b/src/main/java/cc/polyfrost/oneconfig/utils/ColorUtils.java
index 0d8ae6d..ee9fe3e 100644
--- a/src/main/java/cc/polyfrost/oneconfig/utils/ColorUtils.java
+++ b/src/main/java/cc/polyfrost/oneconfig/utils/ColorUtils.java
@@ -8,38 +8,68 @@ import java.awt.*;
  * A class to help with color manipulation.
  */
 public class ColorUtils {
+    /** Always returns transparent. */
+    public static final int TRANSPARENT = -10;
+    /** <h1>Primary Color Scheme</h1> Normal: Primary 600,<br> Hover: Primary 700,<br> Clicked: Primary 700 (80%) */
+    public static final int PRIMARY = 1;
+    /** <h1>Secondary Color Scheme</h1> Normal: Gray 500,<br> Hover: Gray 400,<br> Clicked: Gray 400 (80%) */
+    public static final int SECONDARY = 2;
+    /** <h1>Secondary (Transparent) Color Scheme</h1> Normal: Transparent,<br> Hover: Gray rgba(229, 229, 229, 77),<br> Clicked: Gray rgba(229, 229, 229, 51) */
+    public static final int SECONDARY_TRANSPARENT = 0;
+    /** <h1>Tertiary Color Scheme</h1> Normal: Transparent (Text=White 90%),<br> Hover: Transparent (Text=White 100%),<br> Clicked: Transparent (Text=White 80%)
+     * <h2>NOTICE this returns the text colors as it is always transparent.</h2>*/
+    public static final int TERTIARY = 3;
+    /** <h1>Primary Destructive Color Scheme</h1> Normal: Error 700,<br> Hover: Error 600,<br> Clicked: Error 600 (80%) */
+    public static final int PRIMARY_DESTRUCTIVE = -1;
+    /** <h1>Secondary Destructive Color Scheme</h1> Normal: Gray 500,<br> Hover: Error 800,<br> Clicked: Error 800 (80%) */
+    public static final int SECONDARY_DESTRUCTIVE = -2;
+    /** <h1>Tertiary Destructive Color Scheme</h1> Normal: Transparent (Text=White 90%),<br> Hover: Transparent (Text=Error 300),<br> Clicked: Transparent (Text=Error 300 80%)
+     * <h2>NOTICE this returns the text colors as it is always transparent.</h2>*/
+    public static final int TERTIARY_DESTRUCTIVE = -3;
+
 
     public static int getColor(int currentColor, int colorPalette, boolean hover, boolean click) {
         float[] color = splitColor(currentColor);
+        if(colorPalette == TRANSPARENT) {
+            return OneConfigConfig.TRANSPARENT;
+        }
         if (click) {
             switch (colorPalette) {
-                case -2:
-                    return new Color(0.9f, 0.9f, 0.9f, 0.2f).getRGB();
-                case -1:
-                    return OneConfigConfig.GRAY_500_80;
+                case PRIMARY_DESTRUCTIVE:
+                    return OneConfigConfig.ERROR_600_80;
+                case SECONDARY_DESTRUCTIVE:
+                    return OneConfigConfig.ERROR_800_80;
+                case TERTIARY_DESTRUCTIVE:
+                    return OneConfigConfig.ERROR_300_80;
+                case TERTIARY:
+                    return OneConfigConfig.WHITE_80;
                 default:
-                case 2:
-                case 0:
+                case SECONDARY:
                     return OneConfigConfig.GRAY_400_80;
-                case 1:
-                    return OneConfigConfig.PRIMARY_600_80;
+                case SECONDARY_TRANSPARENT:
+                    return new Color(0.9f, 0.9f, 0.9f, 0.2f).getRGB();
+                case PRIMARY:
+                    return OneConfigConfig.PRIMARY_700_80;
             }
         }
 
         switch (colorPalette) {
-            case -2:
-                return getColorComponents(color, splitColor(OneConfigConfig.TRANSPARENT), new float[]{0.9f, 0.9f, 0.9f, 0.3f}, hover, 50f);
-            case -1:
-                return getColorComponents(color, splitColor(OneConfigConfig.TRANSPARENT), splitColor(OneConfigConfig.GRAY_500), hover, 50f);
+            case SECONDARY_TRANSPARENT:         // Formally -2
+                return getColorComponents(color, new float[]{0f,0f,0f,0f}, new float[]{0.9f, 0.9f, 0.9f, 0.3f}, hover, 50f);
+            case PRIMARY:       // Formally 1
+                return hover ? OneConfigConfig.PRIMARY_700 : OneConfigConfig.PRIMARY_600;
+                //return getColorComponents(color, splitColor(OneConfigConfig.PRIMARY_600), splitColor(OneConfigConfig.PRIMARY_700), hover, 100f);
             default:
-            case 0:
-                return getColorComponents(color, splitColor(OneConfigConfig.GRAY_600), splitColor(OneConfigConfig.GRAY_300), hover, 50f);
-            case 1:
-                return getColorComponents(color, splitColor(OneConfigConfig.PRIMARY_600), splitColor(OneConfigConfig.PRIMARY_500), hover, 150f);
-            case 2:
-                return getColorComponents(color, splitColor(OneConfigConfig.GRAY_500), splitColor(OneConfigConfig.GRAY_300), hover, 50f);
-            case 3:
-                return getColorComponents(color, splitColor(OneConfigConfig.GRAY_500), splitColor(OneConfigConfig.GRAY_300), hover, 150f);
+            case SECONDARY:     // Formally 0
+                return getColorComponents(color, splitColor(OneConfigConfig.GRAY_500), splitColor(OneConfigConfig.GRAY_400), hover, 100f);
+            case TERTIARY:
+                return getColorComponents(color, splitColor(OneConfigConfig.WHITE_90), splitColor(OneConfigConfig.WHITE), hover, 150f);
+            case PRIMARY_DESTRUCTIVE:
+                return getColorComponents(color, splitColor(OneConfigConfig.ERROR_700), splitColor(OneConfigConfig.ERROR_600), hover, 100f);
+            case SECONDARY_DESTRUCTIVE:
+                return getColorComponents(color, splitColor(OneConfigConfig.GRAY_500), splitColor(OneConfigConfig.ERROR_800), hover, 100f);
+            case TERTIARY_DESTRUCTIVE:
+                return getColorComponents(color, splitColor(OneConfigConfig.WHITE_90), splitColor(OneConfigConfig.ERROR_300), hover, 100f);
         }
 
     }