Add new colors

Author: hasparus

src/app/colors.css

@@ -0,0 +1,41 @@
+:root {
+  --color-pri-lighter: #ffccef;
+  --color-pri-light: #ffccef;
+  --color-pri-base: #e10098;
+  --color-pri-dark: #990069;
+  --color-pri-darker: #660046;
+
+  --color-sec-lighter: #edfad1;
+  --color-sec-light: #dbf6a2;
+  --color-sec-base: #c3f654;
+  --color-sec-dark: #83bd02;
+  --color-sec-darker: #507501;
+
+  --color-neu-0: #ffffff;
+  --color-neu-50: #fafcf4;
+  --color-neu-100: #f3f4f0;
+  --color-neu-200: #e7e9e2;
+  --color-neu-300: #dbded3;
+  --color-neu-400: #cfd3c5;
+  --color-neu-500: #b8bda8;
+  --color-neu-600: #a0a88a;
+  --color-neu-700: #6d7557;
+  --color-neu-800: #363a2c;
+  --color-neu-900: #0e0f0b;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-neu-900: #ffffff;
+    --color-neu-800: #fafcf4;
+    --color-neu-700: #f3f4f0;
+    --color-neu-600: #e7e9e2;
+    --color-neu-500: #dbded3;
+    --color-neu-400: #cfd3c5;
+    --color-neu-300: #b8bda8;
+    --color-neu-200: #a0a88a;
+    --color-neu-100: #6d7557;
+    --color-neu-50: #363a2c;
+    --color-neu-0: #0e0f0b;
+  }
+}

src/app/conf/2025/layout.tsx

@@ -5,6 +5,7 @@ import { Footer } from "../_components/footer"
 import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
 import { NewFontsStyleTag } from "../../fonts"
+import "../../colors.css"
 
 export const metadata = {
   description:

tailwind.config.ts

@@ -24,6 +24,34 @@ const config: Config = {
         primary: "#e10098",
         "conf-black": "#0e031c",
         black: "#1b1b1b",
+
+        // #region new design system colors
+        "pri-lighter": "var(--color-pri-lighter)",
+        "pri-light": "var(--color-pri-light)",
+        "pri-base": "var(--color-pri-base)",
+        "pri-dark": "var(--color-pri-dark)",
+        "pri-darker": "var(--color-pri-darker)",
+
+        "sec-lighter": "var(--color-sec-lighter)",
+        "sec-light": "var(--color-sec-light)",
+        "sec-base": "var(--color-sec-base)",
+        "sec-dark": "var(--color-sec-dark)",
+        "sec-darker": "var(--color-sec-darker)",
+
+        // We're using 3-letter color names to avoid conflicting
+        // with the old `neutral` color.
+        "neu-0": "var(--color-neu-0)",
+        "neu-50": "var(--color-neu-50)",
+        "neu-100": "var(--color-neu-100)",
+        "neu-200": "var(--color-neu-200)",
+        "neu-300": "var(--color-neu-300)",
+        "neu-400": "var(--color-neu-400)",
+        "neu-500": "var(--color-neu-500)",
+        "neu-600": "var(--color-neu-600)",
+        "neu-700": "var(--color-neu-700)",
+        "neu-800": "var(--color-neu-800)",
+        "neu-900": "var(--color-neu-900)",
+        // #endregion new design system colors
       },
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",