feat(themes): info colors

kripod · Dec 15, 2023 · 6a10f90 · 6a10f90
1 parent 5fe16e5
commit 6a10f90
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git 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
@@ -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]),