From 6a10f904d3e918b0806ac1caaa1547fb6a696cc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krist=C3=B3f=20Poduszl=C3=B3?=
 <14854048+kripod@users.noreply.github.com>
Date: Fri, 15 Dec 2023 22:39:35 +0100
Subject: [PATCH] feat(themes): info colors

---
 src/components/Alert.tsx |  9 ++++-----
 src/themes.ts            | 16 +++++++++++++++-
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
index 996aa03..f8bea85 100644
--- a/src/components/Alert.tsx
+++ b/src/components/Alert.tsx
@@ -6,25 +6,24 @@ import {
 import { clsx } from "clsx";
 
 export interface AlertProps {
-  sentiment?: "neutral" | "warning" | "danger";
+  sentiment?: "info" | "warning" | "danger";
   children?: React.ReactNode;
 }
 
 const iconBySentiment = {
-  neutral: InformationCircleIcon,
+  info: InformationCircleIcon,
   warning: ExclamationTriangleIcon,
   danger: XCircleIcon,
 } satisfies Record<NonNullable<AlertProps["sentiment"]>, React.ComponentType>;
 
-export function Alert({ sentiment = "neutral", children }: AlertProps) {
+export function Alert({ sentiment = "info", children }: AlertProps) {
   const Icon = iconBySentiment[sentiment];
 
   return (
     <div
       role="alert"
       className={clsx("flex gap-x-2 rounded-2xl border p-4 text-base", {
-        "border-ui-neutral-2 bg-ui-neutral-1 text-ui-neutral-5":
-          sentiment === "neutral",
+        "border-ui-info-2 bg-ui-info-1 text-ui-info-5": sentiment === "info",
         "border-ui-warning-2 bg-ui-warning-1 text-ui-warning-5":
           sentiment === "warning",
         "border-ui-danger-2 bg-ui-danger-1 text-ui-danger-5":
diff --git a/src/themes.ts b/src/themes.ts
index 21669ea..e11771d 100644
--- a/src/themes.ts
+++ b/src/themes.ts
@@ -4,7 +4,7 @@ function oklchCoords(color: string) {
   return color.replace(/^oklch\((.+)\)$/u, "$1");
 }
 
-type ColorGroup = "primary" | "neutral" | "warning" | "danger";
+type ColorGroup = "primary" | "neutral" | "info" | "warning" | "danger";
 type ColorLevel = 0 | 1 | 2 | 3 | 4 | 5;
 
 type ColorFamily<T extends ColorGroup> = Record<
@@ -36,6 +36,13 @@ export const lightTheme = {
   "--color-neutral-4": oklchCoords(colors.zinc[colorL4.light]),
   "--color-neutral-5": oklchCoords(colors.zinc[colorL5.light]),
 
+  "--color-info-0": oklchCoords(colors.blue[colorL0.light]),
+  "--color-info-1": oklchCoords(colors.blue[colorL1.light]),
+  "--color-info-2": oklchCoords(colors.blue[colorL2.light]),
+  "--color-info-3": oklchCoords(colors.blue[colorL3.light]),
+  "--color-info-4": oklchCoords(colors.blue[colorL4.light]),
+  "--color-info-5": oklchCoords(colors.blue[colorL5.light]),
+
   "--color-warning-0": oklchCoords(colors.yellow[colorL0.light]),
   "--color-warning-1": oklchCoords(colors.yellow[colorL1.light]),
   "--color-warning-2": oklchCoords(colors.yellow[colorL2.light]),
@@ -66,6 +73,13 @@ export const darkTheme = {
   "--color-neutral-4": oklchCoords(colors.zinc[colorL4.dark]),
   "--color-neutral-5": oklchCoords(colors.zinc[colorL5.dark]),
 
+  "--color-info-0": oklchCoords(colors.blue[colorL0.dark]),
+  "--color-info-1": oklchCoords(colors.blue[colorL1.dark]),
+  "--color-info-2": oklchCoords(colors.blue[colorL2.dark]),
+  "--color-info-3": oklchCoords(colors.blue[colorL3.dark]),
+  "--color-info-4": oklchCoords(colors.blue[colorL4.dark]),
+  "--color-info-5": oklchCoords(colors.blue[colorL5.dark]),
+
   "--color-warning-0": oklchCoords(colors.yellow[colorL0.dark]),
   "--color-warning-1": oklchCoords(colors.yellow[colorL1.dark]),
   "--color-warning-2": oklchCoords(colors.yellow[colorL2.dark]),