Badge component updates 022426

apps/apollo-vertex/app/components/theme-wrapper.tsx

@@ -1,58 +1,8 @@
 "use client";
 
 import type React from "react";
-import { useEffect, useState } from "react";
-import type { ThemeConfig } from "@/registry/shell/shell-theme-provider";
 import { ThemeProvider } from "@/registry/shell/shell-theme-provider";
-import { getCustomTheme, type ThemeName, themes } from "../themes";
-
-const THEME_STORAGE_KEY = "apollo-vertex-theme";
 
 export function ThemeWrapper({ children }: { children: React.ReactNode }) {
-  const [themeConfig, setThemeConfig] = useState<ThemeConfig>(
-    themes.default.config,
-  );
-
-  useEffect(() => {
-    const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
-    if (savedTheme) {
-      if (savedTheme === "custom") {
-        const customTheme = getCustomTheme();
-        if (customTheme) {
-          setThemeConfig(customTheme);
-        } else {
-          // Fallback to default if custom theme doesn't exist
-          setThemeConfig(themes.default.config);
-        }
-      } else if (savedTheme in themes) {
-        setThemeConfig(themes[savedTheme as keyof typeof themes].config);
-      }
-    }
-
-    const handleThemeChange = (event: Event) => {
-      const customEvent = event as CustomEvent<ThemeName>;
-      const newTheme = customEvent.detail;
-
-      if (newTheme === "custom") {
-        const customTheme = getCustomTheme();
-        if (customTheme) {
-          setThemeConfig(customTheme);
-        }
-      } else if (newTheme in themes) {
-        setThemeConfig(themes[newTheme as keyof typeof themes].config);
-      }
-    };
-
-    window.addEventListener("theme-change", handleThemeChange);
-
-    return () => {
-      window.removeEventListener("theme-change", handleThemeChange);
-    };
-  }, []);
-
-  return (
-    <ThemeProvider themeConfig={themeConfig} storageKey="theme">
-      {children}
-    </ThemeProvider>
-  );
+  return <ThemeProvider storageKey="theme">{children}</ThemeProvider>;
 }

apps/apollo-vertex/app/globals.css

@@ -9,14 +9,50 @@
 
 @custom-variant dark (&:is(.dark *)); /* or nextra-theme-blog/style.css */
 
+/* Tokens not covered by theme.generated.css (gitignored) */
+@theme inline {
+  --color-brand-orange: var(--brand-orange);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-badge: var(--badge);
+  --color-badge-foreground: var(--badge-foreground);
+}
+
 :root {
   /* Override Nextra's background to match our theme */
   --x-color-nextra-bg: var(--background);
+  /* Status & brand tokens */
+  --brand-orange: #fa4616;
+  --destructive-foreground: oklch(1 0 89.8800);
+  --success: oklch(0.57 0.105 152);
+  --success-foreground: oklch(1 0 89.8800);
+  --info: oklch(0.60 0.125 210);
+  --info-foreground: oklch(1 0 89.8800);
+  --warning: oklch(0.80 0.1401 80.82);
+  --warning-foreground: oklch(0.1660 0.0283 203.3400);
+  --badge: oklch(0.5995 0.0199 253.42);
+  --badge-foreground: oklch(1 0 89.8800);
 }
 
 .dark {
   /* Override Nextra's background to match our theme */
   --x-color-nextra-bg: var(--background);
+  /* Status & brand tokens */
+  --brand-orange: #fa4616;
+  --destructive-foreground: oklch(0.1660 0.0283 203.3400);
+  --success: oklch(0.70 0.120 152);
+  --success-foreground: oklch(0.1660 0.0283 203.3400);
+  --info: oklch(0.69 0.112 207);
+  --info-foreground: oklch(0.1660 0.0283 203.3400);
+  --warning: oklch(0.6889 0.1401 80.82);
+  --warning-foreground: oklch(0.1660 0.0283 203.3400);
+  --badge: oklch(0.7196 0.0135 255.53);
+  --badge-foreground: oklch(0.1660 0.0283 203.3400);
 }
 
 @layer base {

apps/apollo-vertex/app/shadcn-components/badge/page.mdx

@@ -1,16 +1,58 @@
 import { Badge } from '@/registry/badge/badge'
+import { AlertTriangle, CircleAlert, Check } from 'lucide-react'
 
 # Badge
 
 Displays a badge or a component that looks like a badge.
 
+Badges combine a `variant` appearance (primary, secondary, or outline). Icons are optional and can be passed as children.
+
+<Badge>Primary</Badge> badges are used when a status needs emphasis or immediate recognition. Use them in detail views, confirmation states, or when the badge should stand out as a focal element in the interface.
+
+<Badge variant="secondary">Secondary</Badge> badges are best for dense UI contexts such as tables, lists, or dashboards where many statuses appear at once. They communicate state clearly without overwhelming the layout with strong color.
+
+<Badge variant="outline">Outline</Badge> badges are intended for low-emphasis or contextual use, such as inline references, filters, or selectable states. They provide clarity while maintaining a lightweight visual presence.
+
+### Neutral
+
 <div className="p-4 border rounded-lg mt-4 flex flex-wrap gap-2">
-  <Badge>Default</Badge>
+  <Badge>Primary</Badge>
   <Badge variant="secondary">Secondary</Badge>
-  <Badge variant="destructive">Destructive</Badge>
   <Badge variant="outline">Outline</Badge>
 </div>
 
+### Informational
+
+<div className="p-4 border rounded-lg mt-4 flex flex-wrap gap-2">
+  <Badge status="info">Primary</Badge>
+  <Badge status="info" variant="secondary">Secondary</Badge>
+  <Badge status="info" variant="outline">Outline</Badge>
+</div>
+
+### Warning
+
+<div className="p-4 border rounded-lg mt-4 flex flex-wrap gap-2">
+  <Badge status="warning"><AlertTriangle strokeWidth={2} /> Primary</Badge>
+  <Badge status="warning" variant="secondary"><AlertTriangle strokeWidth={2} /> Secondary</Badge>
+  <Badge status="warning" variant="outline"><AlertTriangle strokeWidth={2} /> Outline</Badge>
+</div>
+
+### Error
+
+<div className="p-4 border rounded-lg mt-4 flex flex-wrap gap-2">
+  <Badge status="error"><CircleAlert strokeWidth={2} /> Primary</Badge>
+  <Badge status="error" variant="secondary"><CircleAlert strokeWidth={2} /> Secondary</Badge>
+  <Badge status="error" variant="outline"><CircleAlert strokeWidth={2} /> Outline</Badge>
+</div>
+
+### Success
+
+<div className="p-4 border rounded-lg mt-4 flex flex-wrap gap-2">
+  <Badge status="success"><Check strokeWidth={2} /> Primary</Badge>
+  <Badge status="success" variant="secondary"><Check strokeWidth={2} /> Secondary</Badge>
+  <Badge status="success" variant="outline"><Check strokeWidth={2} /> Outline</Badge>
+</div>
+
 ## Installation
 
 ```bash
@@ -21,11 +63,20 @@ npx shadcn@latest add @uipath/badge
 
 ```tsx
 import { Badge } from "@/components/ui/badge"
-```
 
-```tsx
 <Badge>Badge</Badge>
 <Badge variant="secondary">Secondary</Badge>
-<Badge variant="destructive">Destructive</Badge>
 <Badge variant="outline">Outline</Badge>
+
+// Success status (default variant)
+<Badge status="success">Completed</Badge>
+
+// Warning status with secondary variant
+<Badge status="warning" variant="secondary">Could not run</Badge>
+
+// Error status with outline variant
+<Badge status="error" variant="outline">Doc missing</Badge>
+
+// With icons (consumer-provided)
+<Badge status="info"><Info /> Ready</Badge>
 ```

apps/apollo-vertex/app/themes.ts

@@ -19,10 +19,10 @@ export const themes = {
         mutedForeground: "oklch(0.4594 0.0280 264.2500)",
         accent: "oklch(0.7800 0.1120 207.1000)",
         accentForeground: "oklch(0.2394 0.0455 252.4500)",
-        destructive: "oklch(0.5349 0.2026 27.61)",
-        success: "oklch(0.5599 0.1335 152.55)",
-        info: "oklch(0.692 0.1119 207.06)",
-        warning: "oklch(0.6889 0.1401 80.82)",
+        destructive: "oklch(0.6256 0.1933 23.03)",
+        success: "oklch(0.57 0.105 152)",
+        info: "oklch(0.60 0.125 210)",
+        warning: "oklch(0.80 0.1401 80.82)",
         border: "oklch(0.9229 0.0065 252.1300)",
         input: "oklch(0.9229 0.0065 252.1300)",
         ring: "oklch(0.6920 0.1119 207.0600)",
@@ -55,10 +55,10 @@ export const themes = {
         mutedForeground: "oklch(0.7200 0.0300 254.3800)",
         accent: "oklch(0.5730 0.1140 211.4000)",
         accentForeground: "oklch(0.9416 0.0145 244.7200)",
-        destructive: "oklch(0.6542 0.2321 28.66)",
-        success: "oklch(0.7694 0.1907 151.73)",
-        info: "oklch(0.692 0.1119 207.06)",
-        warning: "oklch(0.779 0.1402 84.95)",
+        destructive: "oklch(0.6856 0.1933 23.03)",
+        success: "oklch(0.70 0.120 152)",
+        info: "oklch(0.69 0.112 207)",
+        warning: "oklch(0.6889 0.1401 80.82)",
         border: "oklch(0.3068 0.0426 258.2900)",
         input: "oklch(0.3068 0.0426 258.2900)",
         ring: "oklch(0.6920 0.1119 207.0600)",
@@ -96,7 +96,7 @@ export const themes = {
         mutedForeground: "oklch(0.45 0.03 240)",
         accent: "oklch(0.75 0.12 200)",
         accentForeground: "oklch(0.98 0.01 220)",
-        destructive: "oklch(0.577 0.245 27.325)",
+        destructive: "oklch(0.6256 0.1933 23.03)",
         success: "oklch(0.52 0.12 170)",
         info: "oklch(0.55 0.15 240)",
         warning: "oklch(0.65 0.13 65)",
@@ -124,7 +124,7 @@ export const themes = {
         mutedForeground: "oklch(0.65 0.04 220)",
         accent: "oklch(0.35 0.08 200)",
         accentForeground: "oklch(0.95 0.01 220)",
-        destructive: "oklch(0.704 0.191 22.216)",
+        destructive: "oklch(0.6856 0.1933 23.03)",
         success: "oklch(0.72 0.17 170)",
         info: "oklch(0.65 0.18 220)",
         warning: "oklch(0.75 0.13 65)",
@@ -157,7 +157,7 @@ export const themes = {
         mutedForeground: "oklch(0.45 0.03 30)",
         accent: "oklch(0.70 0.18 25)",
         accentForeground: "oklch(0.99 0.01 40)",
-        destructive: "oklch(0.577 0.245 27.325)",
+        destructive: "oklch(0.6256 0.1933 23.03)",
         success: "oklch(0.55 0.15 145)",
         info: "oklch(0.55 0.20 35)",
         warning: "oklch(0.62 0.16 55)",
@@ -185,7 +185,7 @@ export const themes = {
         mutedForeground: "oklch(0.65 0.04 40)",
         accent: "oklch(0.40 0.12 25)",
         accentForeground: "oklch(0.95 0.01 40)",
-        destructive: "oklch(0.704 0.191 22.216)",
+        destructive: "oklch(0.6856 0.1933 23.03)",
         success: "oklch(0.74 0.18 145)",
         info: "oklch(0.70 0.22 35)",
         warning: "oklch(0.73 0.16 55)",

apps/apollo-vertex/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/apollo-vertex/registry.json

@@ -30,9 +30,15 @@
           "color-accent": "var(--accent)",
           "color-accent-foreground": "var(--accent-foreground)",
           "color-destructive": "var(--destructive)",
+          "color-destructive-foreground": "var(--destructive-foreground)",
           "color-success": "var(--success)",
+          "color-success-foreground": "var(--success-foreground)",
           "color-info": "var(--info)",
+          "color-info-foreground": "var(--info-foreground)",
           "color-warning": "var(--warning)",
+          "color-warning-foreground": "var(--warning-foreground)",
+          "color-badge": "var(--badge)",
+          "color-badge-foreground": "var(--badge-foreground)",
           "color-border": "var(--border)",
           "color-input": "var(--input)",
           "color-ring": "var(--ring)",
@@ -65,11 +71,16 @@
           "muted-foreground": "oklch(0.4594 0.0280 264.2500)",
           "accent": "oklch(0.7800 0.1120 207.1000)",
           "accent-foreground": "oklch(0.2394 0.0455 252.4500)",
-          "destructive": "oklch(0.5349 0.2026 27.61)",
+          "destructive": "oklch(0.62 0.150 18)",
           "destructive-foreground": "oklch(1 0 89.8800)",
-          "success": "oklch(0.5599 0.1335 152.55)",
-          "info": "oklch(0.692 0.1119 207.06)",
-          "warning": "oklch(0.6889 0.1401 80.82)",
+          "success": "oklch(0.57 0.105 152)",
+          "success-foreground": "oklch(1 0 89.8800)",
+          "info": "oklch(0.60 0.125 210)",
+          "info-foreground": "oklch(1 0 89.8800)",
+          "warning": "oklch(0.80 0.1401 80.82)",
+          "warning-foreground": "oklch(0.1660 0.0283 203.3400)",
+          "badge": "oklch(0.5995 0.0199 253.42)",
+          "badge-foreground": "oklch(1 0 89.8800)",
           "border": "oklch(0.9229 0.0065 252.1300)",
           "input": "oklch(0.9229 0.0065 252.1300)",
           "ring": "oklch(0.6920 0.1119 207.0600)",
@@ -134,11 +145,16 @@
           "muted-foreground": "oklch(0.7200 0.0300 254.3800)",
           "accent": "oklch(0.5730 0.1140 211.4000)",
           "accent-foreground": "oklch(0.9416 0.0145 244.7200)",
-          "destructive": "oklch(0.6542 0.2321 28.66)",
-          "destructive-foreground": "oklch(1.0000 0.0000 89.88)",
-          "success": "oklch(0.7694 0.1907 151.73)",
-          "info": "oklch(0.692 0.1119 207.06)",
-          "warning": "oklch(0.779 0.1402 84.95)",
+          "destructive": "oklch(0.68 0.155 18)",
+          "destructive-foreground": "oklch(0.1660 0.0283 203.3400)",
+          "success": "oklch(0.70 0.120 152)",
+          "success-foreground": "oklch(0.1660 0.0283 203.3400)",
+          "info": "oklch(0.69 0.112 207)",
+          "info-foreground": "oklch(0.1660 0.0283 203.3400)",
+          "warning": "oklch(0.6889 0.1401 80.82)",
+          "warning-foreground": "oklch(0.1660 0.0283 203.3400)",
+          "badge": "oklch(0.7196 0.0135 255.53)",
+          "badge-foreground": "oklch(0.1660 0.0283 203.3400)",
           "border": "oklch(0.3068 0.0426 258.2900)",
           "input": "oklch(0.3068 0.0426 258.2900)",
           "ring": "oklch(0.6920 0.1119 207.0600)",