From 4d50d705bf901c5c20b3d424f0fb790cd41c0875 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 21 Apr 2025 19:20:26 +0200 Subject: [PATCH 1/3] Add new colors --- src/app/colors.css | 41 ++++++++++++++++++++++++++++++++++++ src/app/conf/2025/layout.tsx | 1 + tailwind.config.ts | 28 ++++++++++++++++++++++++ 3 files changed, 70 insertions(+) create mode 100644 src/app/colors.css diff --git a/src/app/colors.css b/src/app/colors.css new file mode 100644 index 0000000000..f2d8f461d7 --- /dev/null +++ b/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; + } +} diff --git a/src/app/conf/2025/layout.tsx b/src/app/conf/2025/layout.tsx index 280141b2d3..57d1d206e6 100644 --- a/src/app/conf/2025/layout.tsx +++ b/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: diff --git a/tailwind.config.ts b/tailwind.config.ts index 9db1732ed5..b174f080aa 100644 --- a/tailwind.config.ts +++ b/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))", From 53c2514ead3cf538630c85a188f664f95d7b31e4 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 22 Apr 2025 01:04:17 +0200 Subject: [PATCH 2/3] Use relative rgb colors to support alpha --- tailwind.config.ts | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/tailwind.config.ts b/tailwind.config.ts index b174f080aa..5f8fa25c77 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,6 +1,6 @@ +import { fontFamily } from "tailwindcss/defaultTheme" import type { Config } from "tailwindcss" import typography from "@tailwindcss/typography" -import { fontFamily } from "tailwindcss/defaultTheme" const config: Config = { content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "./theme.config.tsx"], @@ -40,17 +40,17 @@ const config: Config = { // 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)", + "neu-0": "rgb(from var(--color-neu-0) r g b / )", + "neu-50": "rgb(from var(--color-neu-50) r g b / )", + "neu-100": "rgb(from var(--color-neu-100) r g b / )", + "neu-200": "rgb(from var(--color-neu-200) r g b / )", + "neu-300": "rgb(from var(--color-neu-300) r g b / )", + "neu-400": "rgb(from var(--color-neu-400) r g b / )", + "neu-500": "rgb(from var(--color-neu-500) r g b / )", + "neu-600": "rgb(from var(--color-neu-600) r g b / )", + "neu-700": "rgb(from var(--color-neu-700) r g b / )", + "neu-800": "rgb(from var(--color-neu-800) r g b / )", + "neu-900": "rgb(from var(--color-neu-900) r g b / )", // #endregion new design system colors }, backgroundImage: { From a263043b2d9e5e72fbace54018e2f762c73aec3d Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 22 Apr 2025 01:09:18 +0200 Subject: [PATCH 3/3] Use unwraped custom properties for colors to support older browsers --- src/app/colors.css | 64 +++++++++++++++++++++++----------------------- tailwind.config.ts | 42 +++++++++++++++--------------- 2 files changed, 53 insertions(+), 53 deletions(-) diff --git a/src/app/colors.css b/src/app/colors.css index f2d8f461d7..591e86651c 100644 --- a/src/app/colors.css +++ b/src/app/colors.css @@ -1,41 +1,41 @@ :root { - --color-pri-lighter: #ffccef; - --color-pri-light: #ffccef; - --color-pri-base: #e10098; - --color-pri-dark: #990069; - --color-pri-darker: #660046; + --color-pri-lighter: 319 100% 90%; + --color-pri-light: 319 100% 90%; + --color-pri-base: 319 100% 44%; + --color-pri-dark: 319 100% 30%; + --color-pri-darker: 319 100% 20%; - --color-sec-lighter: #edfad1; - --color-sec-light: #dbf6a2; - --color-sec-base: #c3f654; - --color-sec-dark: #83bd02; - --color-sec-darker: #507501; + --color-sec-lighter: 79 80% 90%; + --color-sec-light: 79 82% 80%; + --color-sec-base: 79 90% 65%; + --color-sec-dark: 79 98% 37%; + --color-sec-darker: 79 98% 23%; - --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; + --color-neu-0: 0 0% 100%; + --color-neu-50: 75 57% 97%; + --color-neu-100: 75 15% 95%; + --color-neu-200: 77 14% 90%; + --color-neu-300: 76 14% 85%; + --color-neu-400: 77 14% 80%; + --color-neu-500: 74 14% 70%; + --color-neu-600: 76 15% 60%; + --color-neu-700: 76 15% 40%; + --color-neu-800: 77 14% 20%; + --color-neu-900: 75 15% 5%; } @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; + --color-neu-900: 0 0% 100%; + --color-neu-800: 75 57% 97%; + --color-neu-700: 75 15% 95%; + --color-neu-600: 77 14% 90%; + --color-neu-500: 76 14% 85%; + --color-neu-400: 77 14% 80%; + --color-neu-300: 74 14% 70%; + --color-neu-200: 76 15% 60%; + --color-neu-100: 76 15% 40%; + --color-neu-50: 77 14% 20%; + --color-neu-0: 75 15% 5%; } } diff --git a/tailwind.config.ts b/tailwind.config.ts index 5f8fa25c77..2dd7acd077 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -26,31 +26,31 @@ const config: Config = { 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)", + "pri-lighter": "hsl(var(--color-pri-lighter) / )", + "pri-light": "hsl(var(--color-pri-light) / )", + "pri-base": "hsl(var(--color-pri-base) / )", + "pri-dark": "hsl(var(--color-pri-dark) / )", + "pri-darker": "hsl(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)", + "sec-lighter": "hsl(var(--color-sec-lighter) / )", + "sec-light": "hsl(var(--color-sec-light) / )", + "sec-base": "hsl(var(--color-sec-base) / )", + "sec-dark": "hsl(var(--color-sec-dark) / )", + "sec-darker": "hsl(var(--color-sec-darker) / )", // We're using 3-letter color names to avoid conflicting // with the old `neutral` color. - "neu-0": "rgb(from var(--color-neu-0) r g b / )", - "neu-50": "rgb(from var(--color-neu-50) r g b / )", - "neu-100": "rgb(from var(--color-neu-100) r g b / )", - "neu-200": "rgb(from var(--color-neu-200) r g b / )", - "neu-300": "rgb(from var(--color-neu-300) r g b / )", - "neu-400": "rgb(from var(--color-neu-400) r g b / )", - "neu-500": "rgb(from var(--color-neu-500) r g b / )", - "neu-600": "rgb(from var(--color-neu-600) r g b / )", - "neu-700": "rgb(from var(--color-neu-700) r g b / )", - "neu-800": "rgb(from var(--color-neu-800) r g b / )", - "neu-900": "rgb(from var(--color-neu-900) r g b / )", + "neu-0": "hsl(var(--color-neu-0) / )", + "neu-50": "hsl(var(--color-neu-50) / )", + "neu-100": "hsl(var(--color-neu-100) / )", + "neu-200": "hsl(var(--color-neu-200) / )", + "neu-300": "hsl(var(--color-neu-300) / )", + "neu-400": "hsl(var(--color-neu-400) / )", + "neu-500": "hsl(var(--color-neu-500) / )", + "neu-600": "hsl(var(--color-neu-600) / )", + "neu-700": "hsl(var(--color-neu-700) / )", + "neu-800": "hsl(var(--color-neu-800) / )", + "neu-900": "hsl(var(--color-neu-900) / )", // #endregion new design system colors }, backgroundImage: {