@ai-matrx/design-system 0.3.1 → 0.4.0

package/dist/index.js

@@ -23,8 +23,8 @@ var badgeVariants = cva(
         outline: "border-border text-foreground",
         success: "border-transparent bg-success/15 text-success",
         warning: "border-transparent bg-warning/15 text-warning",
-        info: "border-blue-200 bg-blue-100 text-blue-800",
-        error: "border-transparent bg-red-500/15 text-red-700 dark:text-red-400",
+        info: "border-info/30 bg-info/15 text-info",
+        error: "border-transparent bg-destructive/15 text-destructive",
         neutral: "border-border bg-muted text-muted-foreground"
       }
     },
@@ -229,8 +229,8 @@ function BottomSheet({
     /* @__PURE__ */ jsx4(
       DrawerPrimitive.Overlay,
       {
-        className: cn("fixed inset-0 z-50 bg-black/80", "fixed inset-0 z-50"),
-        style: { background: "rgba(0, 0, 0, 0.08)" }
+        className: cn("fixed inset-0 z-50 bg-[var(--matrx-overlay-scrim)]", "fixed inset-0 z-50"),
+        style: { background: "var(--matrx-overlay-scrim-drawer)" }
       }
     ),
     /* @__PURE__ */ jsxs2(
@@ -307,7 +307,7 @@ function BottomSheetFooter({
     "div",
     {
       className: cn(
-        "flex-shrink-0 px-4 py-3 pb-safe border-t border-white/[0.06]",
+        "flex-shrink-0 px-4 py-3 pb-safe border-t border-[var(--matrx-sheet-divider)]",
         className
       ),
       children
@@ -431,7 +431,7 @@ var CommandDialogContent = React5.forwardRef(({ className, children, container,
     isModal ? /* @__PURE__ */ jsx7(
       DialogPrimitive.Overlay,
       {
-        className: "fixed inset-0 z-[10000] bg-black/20 dark:bg-black/30 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        className: "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim-soft)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
       }
     ) : null,
     /* @__PURE__ */ jsxs3(
@@ -1028,14 +1028,14 @@ function EditableLabel({
 import * as React7 from "react";
 import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var getVariantStyles = (variant = "default") => {
-  const baseStyles = `flex h-10 w-full border border-border bg-background text-black dark:text-white shadow-input rounded-md px-3 py-2 text-sm file:border-0 file:bg-transparent
-    file:text-sm file:font-medium placeholder:text-neutral-400 dark:placeholder-text-neutral-600
-    focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-neutral-400 dark:focus-visible:ring-neutral-600
+  const baseStyles = `flex h-10 w-full border border-border bg-background text-foreground shadow-input rounded-md px-3 py-2 text-sm file:border-0 file:bg-transparent
+    file:text-sm file:font-medium placeholder:text-muted-foreground
+    focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-ring
     disabled:cursor-not-allowed disabled:opacity-50
-    dark:shadow-[0px_0px_1px_1px_var(--neutral-700)]
+    dark:shadow-none
     transition duration-400
     [&:-webkit-autofill]:bg-background [&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--background))_inset] [&:-webkit-autofill]:[caret-color:currentColor]
-    dark:[&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--background))_inset] dark:[&:-webkit-autofill]:[-webkit-text-fill-color:white]
+    dark:[&:-webkit-autofill]:shadow-[0_0_0_1000px_hsl(var(--background))_inset] dark:[&:-webkit-autofill]:[-webkit-text-fill-color:hsl(var(--foreground))]
     [&:-webkit-autofill:hover]:shadow-[0_0_0_1000px_hsl(var(--background))_inset] [&:-webkit-autofill:focus]:shadow-[0_0_0_1000px_hsl(var(--background))_inset]`;
   switch (variant) {
     case "destructive":
@@ -1314,15 +1314,15 @@ var DEFAULT_SCORE_THRESHOLDS = {
 };
 function scoreRingColorClasses(pct, thresholds = DEFAULT_SCORE_THRESHOLDS) {
   if (pct === null) return "text-muted-foreground";
-  if (pct >= thresholds.good) return "text-green-500";
-  if (pct >= thresholds.warning) return "text-orange-500";
-  return "text-red-500";
+  if (pct >= thresholds.good) return "text-success";
+  if (pct >= thresholds.warning) return "text-warning";
+  return "text-destructive";
 }
 function scoreAccentBgClasses(pct, thresholds = DEFAULT_SCORE_THRESHOLDS) {
   if (pct === null) return "bg-muted-foreground/30";
-  if (pct >= thresholds.good) return "bg-green-500";
-  if (pct >= thresholds.warning) return "bg-orange-500";
-  return "bg-red-500";
+  if (pct >= thresholds.good) return "bg-success";
+  if (pct >= thresholds.warning) return "bg-warning";
+  return "bg-destructive";
 }
 function ScoreRing({
   pct,
@@ -1629,7 +1629,7 @@ var SheetOverlay = React12.forwardRef(({ className, ...props }, ref) => /* @__PU
   SheetPrimitive.Overlay,
   {
     className: cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-[var(--matrx-overlay-scrim)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     ),
     ...props,