From 45eec9db5aae2d323ed085b7fe01b5779acafa1a Mon Sep 17 00:00:00 2001 From: Peter Vachon Date: Tue, 24 Feb 2026 08:42:21 -0500 Subject: [PATCH 01/13] chore(apollo-vertex): changes to get the app running locally update --- apps/apollo-vertex/next-env.d.ts | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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/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" From e9ce7036b60fd1055c5f5866d9b3dd3e518035a9 Mon Sep 17 00:00:00 2001 From: Peter Vachon Date: Tue, 24 Feb 2026 09:34:27 -0500 Subject: [PATCH 02/13] chore(apollo-vertex): status badges Initial construction of status badge types and states. --- .../app/shadcn-components/badge/page.mdx | 61 +++++++++++++++++++ apps/apollo-vertex/registry.json | 9 +++ apps/apollo-vertex/registry/badge/badge.tsx | 51 +++++++++++++++- 3 files changed, 119 insertions(+), 2 deletions(-) diff --git a/apps/apollo-vertex/app/shadcn-components/badge/page.mdx b/apps/apollo-vertex/app/shadcn-components/badge/page.mdx index 46ad2b32f..9f2d363f5 100644 --- a/apps/apollo-vertex/app/shadcn-components/badge/page.mdx +++ b/apps/apollo-vertex/app/shadcn-components/badge/page.mdx @@ -1,4 +1,5 @@ import { Badge } from '@/registry/badge/badge' +import { Info, AlertTriangle, CircleAlert, CircleCheck } from 'lucide-react' # Badge @@ -11,6 +12,50 @@ Displays a badge or a component that looks like a badge. Outline +## Status Badges + +Status badges combine a `status` type with a `variant` appearance (primary, secondary, or outline). + +### Default + +
+ No issues + No issues + No issues +
+ +### Informational + +
+ Ready + Ready + Ready +
+ +### Warning + +
+ Could not run + Could not run + Could not run +
+ +### Error + +
+ Doc missing + Doc missing + Doc missing +
+ +### Success + +
+ Completed + Completed + Completed +
+ ## Installation ```bash @@ -29,3 +74,19 @@ import { Badge } from "@/components/ui/badge" Destructive Outline ``` + +### Status Badge Usage + +```tsx +// Status with primary appearance (default variant) +Completed + +// Status with secondary appearance +Could not run + +// Status with outline appearance +Doc missing + +// With icons (consumer-provided) + Ready +``` diff --git a/apps/apollo-vertex/registry.json b/apps/apollo-vertex/registry.json index ed6da7369..cd3028756 100644 --- a/apps/apollo-vertex/registry.json +++ b/apps/apollo-vertex/registry.json @@ -31,8 +31,11 @@ "color-accent-foreground": "var(--accent-foreground)", "color-destructive": "var(--destructive)", "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-border": "var(--border)", "color-input": "var(--input)", "color-ring": "var(--ring)", @@ -68,8 +71,11 @@ "destructive": "oklch(0.5349 0.2026 27.61)", "destructive-foreground": "oklch(1 0 89.8800)", "success": "oklch(0.5599 0.1335 152.55)", + "success-foreground": "oklch(1 0 89.8800)", "info": "oklch(0.692 0.1119 207.06)", + "info-foreground": "oklch(1 0 89.8800)", "warning": "oklch(0.6889 0.1401 80.82)", + "warning-foreground": "oklch(0.2394 0.0455 252.4500)", "border": "oklch(0.9229 0.0065 252.1300)", "input": "oklch(0.9229 0.0065 252.1300)", "ring": "oklch(0.6920 0.1119 207.0600)", @@ -137,8 +143,11 @@ "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)", + "success-foreground": "oklch(0.1660 0.0283 203.3400)", "info": "oklch(0.692 0.1119 207.06)", + "info-foreground": "oklch(0.1660 0.0283 203.3400)", "warning": "oklch(0.779 0.1402 84.95)", + "warning-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..8061473d0 100644 --- a/apps/apollo-vertex/registry/badge/badge.tsx +++ b/apps/apollo-vertex/registry/badge/badge.tsx @@ -18,26 +18,73 @@ const badgeVariants = cva( outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", }, + status: { + default: "", + info: "", + warning: "", + success: "", + error: "", + }, }, + compoundVariants: [ + // default status + primary (variant="default") + { status: "default", variant: "default", class: "border-transparent bg-muted text-foreground" }, + // default status + secondary + { status: "default", variant: "secondary", class: "border-transparent bg-muted/50 text-muted-foreground" }, + // default status + outline + { status: "default", variant: "outline", class: "border-border text-muted-foreground bg-transparent" }, + + // info status + primary + { status: "info", variant: "default", class: "border-transparent bg-info text-info-foreground" }, + // info status + secondary + { status: "info", variant: "secondary", class: "border-transparent bg-info/15 text-info" }, + // info status + outline + { status: "info", variant: "outline", class: "border-info text-info bg-transparent" }, + + // warning status + primary + { status: "warning", variant: "default", class: "border-transparent bg-warning text-warning-foreground" }, + // warning status + secondary + { status: "warning", variant: "secondary", class: "border-transparent bg-warning/15 text-warning" }, + // warning status + outline + { status: "warning", variant: "outline", class: "border-warning text-warning bg-transparent" }, + + // success status + primary + { status: "success", variant: "default", class: "border-transparent bg-success text-success-foreground" }, + // success status + secondary + { status: "success", variant: "secondary", class: "border-transparent bg-success/15 text-success" }, + // success status + outline + { status: "success", variant: "outline", class: "border-success text-success bg-transparent" }, + + // error status + primary + { status: "error", variant: "default", class: "border-transparent bg-destructive text-destructive-foreground" }, + // error status + secondary + { status: "error", variant: "secondary", class: "border-transparent bg-destructive/15 text-destructive" }, + // error status + outline + { status: "error", variant: "outline", class: "border-destructive 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 ( ); From f91d78614fe3945d025ed9a21441097cd4aa7f47 Mon Sep 17 00:00:00 2001 From: Peter Vachon Date: Tue, 24 Feb 2026 13:58:15 -0500 Subject: [PATCH 03/13] chore(apollo-vertex): status badge color adjustments --- .../app/shadcn-components/badge/page.mdx | 32 +++++++---------- apps/apollo-vertex/registry.json | 21 +++++------ apps/apollo-vertex/registry/badge/badge.tsx | 36 ++++++------------- 3 files changed, 33 insertions(+), 56 deletions(-) diff --git a/apps/apollo-vertex/app/shadcn-components/badge/page.mdx b/apps/apollo-vertex/app/shadcn-components/badge/page.mdx index 9f2d363f5..c0cd336f0 100644 --- a/apps/apollo-vertex/app/shadcn-components/badge/page.mdx +++ b/apps/apollo-vertex/app/shadcn-components/badge/page.mdx @@ -16,44 +16,36 @@ Displays a badge or a component that looks like a badge. Status badges combine a `status` type with a `variant` appearance (primary, secondary, or outline). -### Default - -
- No issues - No issues - No issues -
- ### Informational
- Ready - Ready - Ready + Primary + Secondary + Outline
### Warning
- Could not run - Could not run - Could not run + Primary + Secondary + Outline
### Error
- Doc missing - Doc missing - Doc missing + Primary + Secondary + Outline
### Success
- Completed - Completed - Completed + Primary + Secondary + Outline
## Installation diff --git a/apps/apollo-vertex/registry.json b/apps/apollo-vertex/registry.json index cd3028756..681eea5ea 100644 --- a/apps/apollo-vertex/registry.json +++ b/apps/apollo-vertex/registry.json @@ -30,6 +30,7 @@ "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)", @@ -68,14 +69,14 @@ "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)", + "success": "oklch(0.57 0.105 152)", "success-foreground": "oklch(1 0 89.8800)", - "info": "oklch(0.692 0.1119 207.06)", + "info": "oklch(0.60 0.125 210)", "info-foreground": "oklch(1 0 89.8800)", - "warning": "oklch(0.6889 0.1401 80.82)", - "warning-foreground": "oklch(0.2394 0.0455 252.4500)", + "warning": "oklch(0.80 0.1401 80.82)", + "warning-foreground": "oklch(0.1660 0.0283 203.3400)", "border": "oklch(0.9229 0.0065 252.1300)", "input": "oklch(0.9229 0.0065 252.1300)", "ring": "oklch(0.6920 0.1119 207.0600)", @@ -140,13 +141,13 @@ "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)", + "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.692 0.1119 207.06)", + "info": "oklch(0.69 0.112 207)", "info-foreground": "oklch(0.1660 0.0283 203.3400)", - "warning": "oklch(0.779 0.1402 84.95)", + "warning": "oklch(0.6889 0.1401 80.82)", "warning-foreground": "oklch(0.1660 0.0283 203.3400)", "border": "oklch(0.3068 0.0426 258.2900)", "input": "oklch(0.3068 0.0426 258.2900)", diff --git a/apps/apollo-vertex/registry/badge/badge.tsx b/apps/apollo-vertex/registry/badge/badge.tsx index 8061473d0..a71bfc92c 100644 --- a/apps/apollo-vertex/registry/badge/badge.tsx +++ b/apps/apollo-vertex/registry/badge/badge.tsx @@ -14,12 +14,11 @@ const badgeVariants = cva( secondary: "border-transparent bg-secondary text-secondary-foreground [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", }, status: { - default: "", info: "", warning: "", success: "", @@ -27,39 +26,24 @@ const badgeVariants = cva( }, }, compoundVariants: [ - // default status + primary (variant="default") - { status: "default", variant: "default", class: "border-transparent bg-muted text-foreground" }, - // default status + secondary - { status: "default", variant: "secondary", class: "border-transparent bg-muted/50 text-muted-foreground" }, - // default status + outline - { status: "default", variant: "outline", class: "border-border text-muted-foreground bg-transparent" }, - - // info status + primary + // info status { status: "info", variant: "default", class: "border-transparent bg-info text-info-foreground" }, - // info status + secondary - { status: "info", variant: "secondary", class: "border-transparent bg-info/15 text-info" }, - // info status + outline + { status: "info", variant: "secondary", class: "border-transparent bg-info/15 text-info dark:text-white" }, { status: "info", variant: "outline", class: "border-info text-info bg-transparent" }, - // warning status + primary + // warning status { status: "warning", variant: "default", class: "border-transparent bg-warning text-warning-foreground" }, - // warning status + secondary - { status: "warning", variant: "secondary", class: "border-transparent bg-warning/15 text-warning" }, - // warning status + outline - { status: "warning", variant: "outline", class: "border-warning text-warning bg-transparent" }, + { status: "warning", variant: "secondary", class: "border-transparent bg-warning/15 text-warning-foreground dark:text-white" }, + { status: "warning", variant: "outline", class: "border-warning text-warning-foreground dark:text-warning bg-transparent" }, - // success status + primary + // success status { status: "success", variant: "default", class: "border-transparent bg-success text-success-foreground" }, - // success status + secondary - { status: "success", variant: "secondary", class: "border-transparent bg-success/15 text-success" }, - // success status + outline + { status: "success", variant: "secondary", class: "border-transparent bg-success/10 dark:bg-success/15 text-success dark:text-white" }, { status: "success", variant: "outline", class: "border-success text-success bg-transparent" }, - // error status + primary + // error status { status: "error", variant: "default", class: "border-transparent bg-destructive text-destructive-foreground" }, - // error status + secondary - { status: "error", variant: "secondary", class: "border-transparent bg-destructive/15 text-destructive" }, - // error status + outline + { status: "error", variant: "secondary", class: "border-transparent bg-destructive/10 dark:bg-destructive/15 text-destructive dark:text-white" }, { status: "error", variant: "outline", class: "border-destructive text-destructive bg-transparent" }, ], defaultVariants: { From f64349228ae5df858a6460771b9ac6a5af8b558a Mon Sep 17 00:00:00 2001 From: Peter Vachon Date: Tue, 24 Feb 2026 14:34:05 -0500 Subject: [PATCH 04/13] chore(apollo-vertex): opacity update for secondary badges --- apps/apollo-vertex/registry/badge/badge.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/apollo-vertex/registry/badge/badge.tsx b/apps/apollo-vertex/registry/badge/badge.tsx index a71bfc92c..75a4cea24 100644 --- a/apps/apollo-vertex/registry/badge/badge.tsx +++ b/apps/apollo-vertex/registry/badge/badge.tsx @@ -28,22 +28,22 @@ const badgeVariants = cva( 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 text-info dark:text-white" }, + { 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 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 text-warning-foreground dark:text-white" }, + { 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/15 text-success dark:text-white" }, + { 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 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/15 text-destructive dark:text-white" }, + { 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 bg-transparent" }, ], defaultVariants: { From a666dad1914982f68658bf96e464401b97c1d0d2 Mon Sep 17 00:00:00 2001 From: Peter Vachon Date: Tue, 24 Feb 2026 14:45:05 -0500 Subject: [PATCH 05/13] chore(apollo-vertex): Added in guidance for use --- apps/apollo-vertex/app/shadcn-components/badge/page.mdx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/apollo-vertex/app/shadcn-components/badge/page.mdx b/apps/apollo-vertex/app/shadcn-components/badge/page.mdx index c0cd336f0..7169ab1bb 100644 --- a/apps/apollo-vertex/app/shadcn-components/badge/page.mdx +++ b/apps/apollo-vertex/app/shadcn-components/badge/page.mdx @@ -14,7 +14,13 @@ Displays a badge or a component that looks like a badge. ## Status Badges -Status badges combine a `status` type with a `variant` appearance (primary, secondary, or outline). +Status badges combine a `status` type with 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. ### Informational From 58c6d6ed355094be749467c87cf946e2438b825a Mon Sep 17 00:00:00 2001 From: Peter Vachon Date: Tue, 24 Feb 2026 17:02:27 -0500 Subject: [PATCH 06/13] chore(apollo-vertex): Color updates & guidance --- .../app/shadcn-components/badge/page.mdx | 35 +++++++++---------- apps/apollo-vertex/registry.json | 6 ++++ apps/apollo-vertex/registry/badge/badge.tsx | 12 +++---- 3 files changed, 29 insertions(+), 24 deletions(-) diff --git a/apps/apollo-vertex/app/shadcn-components/badge/page.mdx b/apps/apollo-vertex/app/shadcn-components/badge/page.mdx index 7169ab1bb..fc1e7e88c 100644 --- a/apps/apollo-vertex/app/shadcn-components/badge/page.mdx +++ b/apps/apollo-vertex/app/shadcn-components/badge/page.mdx @@ -1,33 +1,32 @@ import { Badge } from '@/registry/badge/badge' -import { Info, AlertTriangle, CircleAlert, CircleCheck } from 'lucide-react' +import { AlertTriangle, CircleAlert, Check } from 'lucide-react' # Badge Displays a badge or a component that looks like a badge. -
- Default - Secondary - Destructive - Outline -
+Badges combine a `variant` appearance (primary, secondary, or outline). Icons are optional and can be passed as children. -## Status Badges +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. -Status badges combine a `status` type with a `variant` appearance (primary, secondary, or outline). Icons are optional and can be passed as children. +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. - 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. +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. - 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. +### Neutral - 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. +
+ Primary + Secondary + Outline +
### Informational
- Primary - Secondary - Outline + Primary + Secondary + Outline
### Warning @@ -49,9 +48,9 @@ Status badges combine a `status` type with a `variant` appearance (primary, seco ### Success
- Primary - Secondary - Outline + Primary + Secondary + Outline
## Installation diff --git a/apps/apollo-vertex/registry.json b/apps/apollo-vertex/registry.json index 681eea5ea..2493d07df 100644 --- a/apps/apollo-vertex/registry.json +++ b/apps/apollo-vertex/registry.json @@ -37,6 +37,8 @@ "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)", @@ -77,6 +79,8 @@ "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)", @@ -149,6 +153,8 @@ "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 75a4cea24..cf567a04d 100644 --- a/apps/apollo-vertex/registry/badge/badge.tsx +++ b/apps/apollo-vertex/registry/badge/badge.tsx @@ -10,13 +10,13 @@ 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-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: "", @@ -29,7 +29,7 @@ const badgeVariants = cva( // 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 bg-transparent" }, + { 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" }, @@ -39,12 +39,12 @@ const badgeVariants = cva( // 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 bg-transparent" }, + { 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 bg-transparent" }, + { status: "error", variant: "outline", class: "border-destructive text-destructive dark:text-destructive bg-transparent" }, ], defaultVariants: { variant: "default", From ba037b98daaafe961272bc97029fa40a0ef964bb Mon Sep 17 00:00:00 2001 From: Peter Vachon Date: Tue, 24 Feb 2026 17:07:29 -0500 Subject: [PATCH 07/13] chore(apollo-vertex): Icon stroke --- .../app/shadcn-components/badge/page.mdx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/apollo-vertex/app/shadcn-components/badge/page.mdx b/apps/apollo-vertex/app/shadcn-components/badge/page.mdx index fc1e7e88c..289d05408 100644 --- a/apps/apollo-vertex/app/shadcn-components/badge/page.mdx +++ b/apps/apollo-vertex/app/shadcn-components/badge/page.mdx @@ -32,25 +32,25 @@ Badges combine a `variant` appearance (primary, secondary, or outline). Icons ar ### Warning
- Primary - Secondary - Outline + Primary + Secondary + Outline
### Error
- Primary - Secondary - Outline + Primary + Secondary + Outline
### Success
- Primary - Secondary - Outline + Primary + Secondary + Outline
## Installation From bc4d14173414a48cc0b874149b3f2563da330d87 Mon Sep 17 00:00:00 2001 From: Peter Vachon Date: Tue, 24 Feb 2026 17:11:28 -0500 Subject: [PATCH 08/13] chore(apollo-vertex): Usage update --- apps/apollo-vertex/app/shadcn-components/badge/page.mdx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/apps/apollo-vertex/app/shadcn-components/badge/page.mdx b/apps/apollo-vertex/app/shadcn-components/badge/page.mdx index 289d05408..2857511a8 100644 --- a/apps/apollo-vertex/app/shadcn-components/badge/page.mdx +++ b/apps/apollo-vertex/app/shadcn-components/badge/page.mdx @@ -63,18 +63,11 @@ npx shadcn@latest add @uipath/badge ```tsx import { Badge } from "@/components/ui/badge" -``` -```tsx Badge Secondary -Destructive Outline -``` -### Status Badge Usage - -```tsx // Status with primary appearance (default variant) Completed From 7ff5cf038145b89d2cfbf3ae379edbf00861ad32 Mon Sep 17 00:00:00 2001 From: Peter Vachon Date: Tue, 24 Feb 2026 08:42:21 -0500 Subject: [PATCH 09/13] style(apollo-vertex): badge with status styles --- .../app/shadcn-components/badge/page.mdx | 61 +++++++++++++++++-- apps/apollo-vertex/next-env.d.ts | 2 +- apps/apollo-vertex/registry.json | 34 ++++++++--- apps/apollo-vertex/registry/badge/badge.tsx | 43 +++++++++++-- package.json | 2 +- 5 files changed, 120 insertions(+), 22 deletions(-) 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/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" From 4d3db2092d341f63b8306a43d8d69e08592a5a2a Mon Sep 17 00:00:00 2001 From: Peter Vachon Date: Wed, 25 Feb 2026 16:45:35 -0500 Subject: [PATCH 10/13] chore(apollo-vertex): Badge color updates --- apps/apollo-vertex/app/globals.css | 36 ++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) 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 { From 4db6a77eaba3a737553ef883d4d89569d98cc72e Mon Sep 17 00:00:00 2001 From: Peter Vachon Date: Tue, 24 Feb 2026 09:34:27 -0500 Subject: [PATCH 11/13] chore(apollo-vertex): badge color updates --- .../app/shadcn-components/badge/page.mdx | 61 +++++++++++++++++-- apps/apollo-vertex/registry.json | 34 ++++++++--- apps/apollo-vertex/registry/badge/badge.tsx | 43 +++++++++++-- 3 files changed, 118 insertions(+), 20 deletions(-) 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/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 ( ); From 109dacbf3d67f298cac40cf3b772550f4a0757de Mon Sep 17 00:00:00 2001 From: Alin Cadariu Date: Fri, 27 Feb 2026 13:09:52 +0100 Subject: [PATCH 12/13] fix(apollo-vertex): remove theme config from theme wrapper --- .../app/components/theme-wrapper.tsx | 52 +------------------ 1 file changed, 1 insertion(+), 51 deletions(-) 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}; } From 6c7d8a552a27e248ca01742ce4963beafcf3268b Mon Sep 17 00:00:00 2001 From: Peter Vachon Date: Fri, 27 Feb 2026 12:13:16 -0500 Subject: [PATCH 13/13] chore(apollo-vertex): Error color update --- apps/apollo-vertex/app/themes.ts | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) 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)",