changing color scheme

src/app/global.css

@@ -4,10 +4,10 @@
 
 @layer base {
   :root {
-    @apply bg-ui-background font-sans text-white;
+    @apply bg-ui-background font-sans text-black;
   }
   .pegboard {
-    background-image: radial-gradient(#676781 1px, transparent 0);
+    background-image: radial-gradient(#8188b0 1px, transparent 0);
     background-size: 36px 36px;
     @apply bg-center;
   }

tailwind.config.js

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 import colors from "tailwindcss/colors";
 import defaultTheme from "tailwindcss/defaultTheme";
+import { storytellerColors } from "./tailwind.stcolors";
 
 export default {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
@@ -17,6 +18,7 @@ export default {
 
       // common colors
       white: colors.white,
+      gray: storytellerColors.gunpowder,
       black: colors.black,
       red: colors.red,
       oragne: colors.orange,
@@ -33,63 +35,16 @@ export default {
       info: colors.sky[500],
 
       // brand colors
-      primary: {
-        //sunglo
-        DEFAULT: "#e66462", //=500
-        50: "#fdf3f3",
-        100: "#fce4e4",
-        200: "#facfce",
-        300: "#f6acab",
-        400: "#ef7c7a",
-        500: "#e66462",
-        600: "#cf3533",
-        700: "#ae2927",
-        800: "#902624",
-        900: "#782524",
-        950: "#410f0e",
-      },
-      secondary: {
-        //gunpowder
-        DEFAULT: "#39394c", //=950
-        50: "#f5f6f9",
-        100: "#e8eaf1",
-        200: "#d7dbe6",
-        300: "#bbc1d5",
-        400: "#9aa2c0",
-        500: "#8188b0",
-        600: "#6f74a1",
-        700: "#636492",
-        800: "#545579",
-        900: "#464762",
-        950: "#39394c",
-      },
-      tertiary: {
-        //Aquamarine Blue
-        DEFAULT: "#1cb6be", //=300
-        50: "#eefdfc",
-        100: "#d4f9f8",
-        200: "#aef3f3",
-        300: "#62e4e6",
-        400: "#38d3d8",
-        500: "#1cb6be",
-        600: "#1a94a0",
-        700: "#1c7682",
-        800: "#1f616b",
-        900: "#1e505b",
-        950: "#0e353e",
-      },
+      primary: storytellerColors.sunglo,
+      secondary: storytellerColors.gunpowder,
+      tertiary: storytellerColors.aquamarineBlue,
 
       ui: {
-        900: "#1a1a27",
-        background: "#1a1a27",
-        700: "#242433",
-        panel: "#242433",
-        500: "#393948",
-        border: "#393948",
-        300: "#515168",
-        divider: "#515168",
-        100: "#676781",
-        button: "#676781",
+        background: storytellerColors.gunpowder[100],
+        panel: storytellerColors.gunpowder[100],
+        border: storytellerColors.gunpowder[300],
+        divider: storytellerColors.gunpowder[300],
+        button: storytellerColors.gunpowder[500],
       },
     },
   },

tailwind.stcolors.js

@@ -0,0 +1,45 @@
+export const storytellerColors = {
+  sunglo: {
+    //sunglo
+    DEFAULT: "#e66462", //=500
+    50: "#fdf3f3",
+    100: "#fce4e4",
+    200: "#facfce",
+    300: "#f6acab",
+    400: "#ef7c7a",
+    500: "#e66462",
+    600: "#cf3533",
+    700: "#ae2927",
+    800: "#902624",
+    900: "#782524",
+    950: "#410f0e",
+  },
+  gunpowder: {
+    DEFAULT: "#39394c", //=950
+    50: "#f5f6f9",
+    100: "#e8eaf1",
+    200: "#d7dbe6",
+    300: "#bbc1d5",
+    400: "#9aa2c0",
+    500: "#8188b0",
+    600: "#6f74a1",
+    700: "#636492",
+    800: "#545579",
+    900: "#464762",
+    950: "#39394c",
+  },
+  aquamarineBlue: {
+    DEFAULT: "#1cb6be", //=300
+    50: "#eefdfc",
+    100: "#d4f9f8",
+    200: "#aef3f3",
+    300: "#62e4e6",
+    400: "#38d3d8",
+    500: "#1cb6be",
+    600: "#1a94a0",
+    700: "#1c7682",
+    800: "#1f616b",
+    900: "#1e505b",
+    950: "#0e353e",
+  },
+};