diff --git a/apps/apollo-vertex/app/components/theme-wrapper.tsx b/apps/apollo-vertex/app/components/theme-wrapper.tsx index ae8ce5256..27af0b799 100644 --- a/apps/apollo-vertex/app/components/theme-wrapper.tsx +++ b/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( - 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; - 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 ( - - {children} - - ); + return {children}; } diff --git a/apps/apollo-vertex/app/globals.css b/apps/apollo-vertex/app/globals.css index fa5f28f21..2e7274f36 100644 --- a/apps/apollo-vertex/app/globals.css +++ b/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 { diff --git a/apps/apollo-vertex/app/shadcn-components/badge/page.mdx b/apps/apollo-vertex/app/shadcn-components/badge/page.mdx index 46ad2b32f..38eb602f0 100644 --- a/apps/apollo-vertex/app/shadcn-components/badge/page.mdx +++ b/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. + +Primary 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. + +Secondary 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. + +Outline 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 +
- Default + Primary Secondary - Destructive Outline
+### Informational + +
+ Primary + Secondary + Outline +
+ +### Warning + +
+ Primary + Secondary + Outline +
+ +### Error + +
+ Primary + Secondary + Outline +
+ +### Success + +
+ Primary + Secondary + Outline +
+ ## Installation ```bash @@ -21,11 +63,20 @@ npx shadcn@latest add @uipath/badge ```tsx import { Badge } from "@/components/ui/badge" -``` -```tsx Badge Secondary -Destructive Outline + +// Success status (default variant) +Completed + +// Warning status with secondary variant +Could not run + +// Error status with outline variant +Doc missing + +// With icons (consumer-provided) + Ready ``` diff --git a/apps/apollo-vertex/app/themes.ts b/apps/apollo-vertex/app/themes.ts index d6449a961..9bfe90a61 100644 --- a/apps/apollo-vertex/app/themes.ts +++ b/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)", diff --git a/apps/apollo-vertex/next-env.d.ts b/apps/apollo-vertex/next-env.d.ts index 9edff1c7c..c4b7818fb 100644 --- a/apps/apollo-vertex/next-env.d.ts +++ b/apps/apollo-vertex/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -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. diff --git a/apps/apollo-vertex/registry.json b/apps/apollo-vertex/registry.json index 482360c75..d66de2611 100644 --- a/apps/apollo-vertex/registry.json +++ b/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)", diff --git a/apps/apollo-vertex/registry/badge/badge.tsx b/apps/apollo-vertex/registry/badge/badge.tsx index 299a98c93..cf567a04d 100644 --- a/apps/apollo-vertex/registry/badge/badge.tsx +++ b/apps/apollo-vertex/registry/badge/badge.tsx @@ -10,34 +10,65 @@ const badgeVariants = cva( variants: { variant: { default: - "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", + "border-transparent bg-badge text-badge-foreground [a&]:hover:bg-badge/90", secondary: - "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", + "border-transparent bg-[oklch(0.5995_0.0199_253.42_/_0.20)] dark:bg-badge/25 text-[oklch(0.1660_0.0283_203.34)] dark:text-white [a&]:hover:bg-secondary/90", destructive: - "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40", outline: - "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", + "border-badge text-[oklch(0.1660_0.0283_203.34)] dark:text-badge [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", + }, + status: { + info: "", + warning: "", + success: "", + error: "", }, }, + compoundVariants: [ + // info status + { status: "info", variant: "default", class: "border-transparent bg-info text-info-foreground" }, + { status: "info", variant: "secondary", class: "border-transparent bg-info/15 dark:bg-info/25 text-info dark:text-white" }, + { status: "info", variant: "outline", class: "border-info text-info dark:text-info bg-transparent" }, + + // warning status + { status: "warning", variant: "default", class: "border-transparent bg-warning text-warning-foreground" }, + { status: "warning", variant: "secondary", class: "border-transparent bg-warning/15 dark:bg-warning/25 text-warning-foreground dark:text-white" }, + { status: "warning", variant: "outline", class: "border-warning text-warning-foreground dark:text-warning bg-transparent" }, + + // success status + { status: "success", variant: "default", class: "border-transparent bg-success text-success-foreground" }, + { status: "success", variant: "secondary", class: "border-transparent bg-success/10 dark:bg-success/25 text-success dark:text-white" }, + { status: "success", variant: "outline", class: "border-success text-success dark:text-success bg-transparent" }, + + // error status + { status: "error", variant: "default", class: "border-transparent bg-destructive text-destructive-foreground" }, + { status: "error", variant: "secondary", class: "border-transparent bg-destructive/10 dark:bg-destructive/25 text-destructive dark:text-white" }, + { status: "error", variant: "outline", class: "border-destructive text-destructive dark:text-destructive bg-transparent" }, + ], defaultVariants: { variant: "default", }, }, ); +type BadgeVariantProps = VariantProps; + function Badge({ className, variant, + status, asChild = false, ...props }: React.ComponentProps<"span"> & - VariantProps & { asChild?: boolean }) { + BadgeVariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : "span"; return ( ); diff --git a/package.json b/package.json index 4929acfca..eefcef2c6 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "node": ">=22", "pnpm": ">=10" }, - "packageManager": "pnpm@10.18.1", + "packageManager": "pnpm@10.30.2+sha512.36cdc707e7b7940a988c9c1ecf88d084f8514b5c3f085f53a2e244c2921d3b2545bc20dd4ebe1fc245feec463bb298aecea7a63ed1f7680b877dc6379d8d0cb4", "lint-staged": { "*.{js,jsx,ts,tsx,json}": [ "biome check --write --no-errors-on-unmatched"