feat(apollo-vertex): remove subtle visual variant and align tinted description

Author: KokoMilev

apps/apollo-vertex/app/patterns/notifications/in-product/notification-examples.tsx

@@ -80,7 +80,8 @@ export function AlertExamples() {
         <InfoIcon className="h-4 w-4" />
         <AlertTitle>New version available</AlertTitle>
         <AlertDescription>
-          A new version of the platform is ready. Review the changelog for details.
+          A new version of the platform is ready. Review the changelog for
+          details.
         </AlertDescription>
       </Alert>
 
@@ -112,7 +113,7 @@ function DismissibleAlert({
 }: {
   children: ReactNode;
   status: "default" | "warning" | "error";
-  visual?: "outline" | "tinted" | "subtle";
+  visual?: "outline" | "tinted";
 }) {
   const [visible, setVisible] = useState(true);
   if (!visible) return null;

apps/apollo-vertex/app/patterns/notifications/in-product/page.mdx

@@ -134,7 +134,7 @@ Inline alerts support two visual styles. Choose based on the urgency and importa
 
 #### Default (tinted)
 
-Low-opacity status background with neutral title text. Use for critical messages that demand immediate attention or block progress.
+Low-opacity status background with neutral title text. Use for persistent, non-dismissible messages, from routine updates and background info to blocking errors.
 
 <div className="p-4 border rounded-lg mt-4">
   <AlertExamples />
@@ -332,7 +332,7 @@ Avoid driving users away from their workflow unless necessary.
 
 | Question | Answer | Style |
 |---|---|---|
-| Is the message routine, informational, or requires immediate attention? | Yes | Default (tinted) |
+| Is the message routine, informational, or does it require immediate attention? | Yes | Default (tinted) |
 | Is the message contextual, a warning, or an unresolved requirement? | Yes | Accent (outline) |
 
 > When unsure, use **default**. Use Accent only when the message needs a distinct visual call-out.

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

@@ -11,7 +11,7 @@ Displays a callout for user attention.
 
 ### Default (tinted)
 
-Low-opacity status background with neutral title text. Use for critical messages that demand immediate attention.
+Low-opacity status background with neutral title text. Use for persistent messages, from routine updates to blocking errors.
 
 <div className="p-4 border rounded-lg mt-4">
   <AlertExamples />
@@ -66,7 +66,7 @@ import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `status` | `"default" \| "warning" \| "error"` | — | Sets the semantic status color |
-| `visual` | `"outline" \| "tinted" \| "subtle"` | — | Sets the visual treatment |
+| `visual` | `"outline" \| "tinted"` | — | Sets the visual treatment |
 | `variant` | `"default" \| "destructive"` | `"default"` | Legacy shadcn variant (use `status` + `visual` instead) |
 
 ## Complex alert patterns (edge cases)

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

@@ -68,7 +68,7 @@ toast.error("Upload failed", {
 | `duration` | `number` | `5000` | Auto-dismiss delay in milliseconds |
 | `closeButton` | `boolean` | `true` | Show a close button on each toast |
 | `theme` | `"light" \| "dark" \| "system"` | `"system"` | Color theme — defaults to the current app theme via `next-themes` |
-| `toastOptions` | `ToastOptions` | — | Global options applied to all toasts (classNames, style, etc.) |
+| `toastOptions` | `ToasterProps["toastOptions"]` | — | Global options applied to all toasts (classNames, style, etc.) |
 
 ## Toast function options
 

apps/apollo-vertex/registry/alert/alert.tsx

@@ -20,7 +20,6 @@ const alertVariants = cva(
       visual: {
         outline: "bg-card",
         tinted: "border-transparent",
-        subtle: "",
       },
     },
     compoundVariants: [
@@ -33,7 +32,8 @@ const alertVariants = cva(
       {
         status: "warning",
         visual: "outline",
-        className: "border-warning [&>svg]:text-warning-foreground dark:[&>svg]:text-warning",
+        className:
+          "border-warning [&>svg]:text-warning-foreground dark:[&>svg]:text-warning",
       },
       {
         status: "error",
@@ -45,7 +45,8 @@ const alertVariants = cva(
       {
         status: "default",
         visual: "tinted",
-        className: "bg-badge/20 border-transparent text-foreground [&>svg]:text-foreground",
+        className:
+          "bg-badge/20 border-transparent text-foreground [&>svg]:text-foreground",
       },
       {
         status: "warning",
@@ -56,24 +57,8 @@ const alertVariants = cva(
       {
         status: "error",
         visual: "tinted",
-        className: "bg-destructive/10 dark:bg-destructive/25 text-foreground [&>svg]:text-destructive",
-      },
-
-      // subtle — status-colored icon + title (title color applied via AlertContext)
-      {
-        status: "default",
-        visual: "subtle",
-        className: "[&>svg]:text-foreground",
-      },
-      {
-        status: "warning",
-        visual: "subtle",
-        className: "[&>svg]:text-warning-foreground dark:[&>svg]:text-warning",
-      },
-      {
-        status: "error",
-        visual: "subtle",
-        className: "[&>svg]:text-destructive",
+        className:
+          "bg-destructive/10 dark:bg-destructive/25 text-foreground [&>svg]:text-destructive",
       },
     ],
     defaultVariants: {
@@ -82,13 +67,6 @@ const alertVariants = cva(
   },
 );
 
-interface AlertContextValue {
-  status?: "default" | "warning" | "error" | null;
-  visual?: "outline" | "tinted" | "subtle" | null;
-}
-
-const AlertContext = React.createContext<AlertContextValue>({});
-
 interface AlertProps
   extends React.ComponentProps<"div">,
     VariantProps<typeof alertVariants> {}
@@ -102,36 +80,23 @@ function Alert({
   ...props
 }: AlertProps) {
   return (
-    <AlertContext.Provider value={{ status, visual }}>
-      <div
-        data-slot="alert"
-        role="alert"
-        className={cn(alertVariants({ variant, status, visual }), className)}
-        {...props}
-      >
-        {children}
-      </div>
-    </AlertContext.Provider>
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant, status, visual }), className)}
+      {...props}
+    >
+      {children}
+    </div>
   );
 }
 
-// Title colors for the subtle visual variant, keyed by status
-const subtleTitleColors: Record<string, string> = {
-  default: "text-foreground",
-  warning: "text-warning-foreground dark:text-warning",
-  error: "text-destructive",
-};
-
 function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-  const { status, visual } = React.useContext(AlertContext);
-  const colorClass =
-    visual === "subtle" && status ? (subtleTitleColors[status] ?? "") : "";
   return (
     <div
       data-slot="alert-title"
       className={cn(
         "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        colorClass,
         className,
       )}
       {...props}

apps/apollo-vertex/registry/sonner/sonner.tsx

@@ -10,21 +10,29 @@ import {
 import { useTheme } from "next-themes";
 import { Toaster as Sonner, type ToasterProps } from "sonner";
 
-// Shared icon alignment: top-align icons with the first line of toast text
+// Shared icon alignment: top-align icons with the first line of toast text.
 const iconAlign = "[&>[data-icon]]:!items-start [&>[data-icon]>svg]:!mt-0.5";
 
+// Text color for icon, title, description, and close button in status toasts.
+// Light: dark ink (oklch(0.166 0.0283 203.34)) on tinted background; Dark: foreground token.
+const statusTextClasses =
+  "[&>[data-icon]>svg]:!text-[oklch(0.166_0.0283_203.34)] dark:[&>[data-icon]>svg]:!text-foreground " +
+  "[&_[data-title]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-title]]:!text-foreground " +
+  "[&_[data-description]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-description]]:!text-foreground " +
+  "[&_[data-close-button]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-close-button]]:!text-foreground";
+
 // Apollo status styles for Sonner toasts.
-// Light: inverted card surface (info) or status-tinted background; matching icon color.
-// Dark: inverted secondary surface (info) or status-tinted color-mix with popover.
+// Light: inverted card-foreground background (info) or status-tinted background; matching icon color.
+// Dark: inverted card-foreground background (info) or status-tinted color-mix with popover.
 export const apolloToastClassNames: NonNullable<
   NonNullable<ToasterProps["toastOptions"]>["classNames"]
 > = {
   info: `!border-info !bg-card-foreground dark:!bg-card-foreground [&>[data-icon]>svg]:!text-primary-foreground [&_[data-title]]:!text-primary-foreground [&_[data-description]]:!text-primary-foreground [&_[data-close-button]]:!text-primary-foreground ${iconAlign}`,
-  success: `!border-success !bg-[color-mix(in_srgb,var(--success)_25%,var(--card)_75%)] dark:!bg-[color-mix(in_srgb,var(--success)_25%,var(--popover)_75%)] [&>[data-icon]>svg]:!text-[oklch(0.166_0.0283_203.34)] dark:[&>[data-icon]>svg]:!text-foreground [&_[data-title]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-title]]:!text-foreground [&_[data-description]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-description]]:!text-foreground [&_[data-close-button]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-close-button]]:!text-foreground ${iconAlign}`,
-  warning: `!border-warning !bg-[color-mix(in_srgb,var(--warning)_60%,var(--card)_40%)] dark:!bg-[color-mix(in_srgb,var(--warning)_60%,var(--popover)_40%)] [&>[data-icon]>svg]:!text-[oklch(0.166_0.0283_203.34)] dark:[&>[data-icon]>svg]:!text-foreground [&_[data-title]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-title]]:!text-foreground [&_[data-description]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-description]]:!text-foreground [&_[data-close-button]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-close-button]]:!text-foreground ${iconAlign}`,
-  error: `!border-destructive !bg-[color-mix(in_srgb,var(--destructive)_50%,var(--card)_50%)] dark:!bg-[color-mix(in_srgb,var(--destructive)_50%,var(--popover)_50%)] [&>[data-icon]>svg]:!text-[oklch(0.166_0.0283_203.34)] dark:[&>[data-icon]>svg]:!text-foreground [&_[data-title]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-title]]:!text-foreground [&_[data-description]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-description]]:!text-foreground [&_[data-close-button]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-close-button]]:!text-foreground ${iconAlign}`,
+  success: `!border-success !bg-[color-mix(in_srgb,var(--success)_25%,var(--card)_75%)] dark:!bg-[color-mix(in_srgb,var(--success)_25%,var(--popover)_75%)] ${statusTextClasses} ${iconAlign}`,
+  warning: `!border-warning !bg-[color-mix(in_srgb,var(--warning)_60%,var(--card)_40%)] dark:!bg-[color-mix(in_srgb,var(--warning)_60%,var(--popover)_40%)] ${statusTextClasses} ${iconAlign}`,
+  error: `!border-destructive !bg-[color-mix(in_srgb,var(--destructive)_50%,var(--card)_50%)] dark:!bg-[color-mix(in_srgb,var(--destructive)_50%,var(--popover)_50%)] ${statusTextClasses} ${iconAlign}`,
   closeButton:
-    '!left-auto !right-2 !top-2 !transform-none !border-none !bg-transparent !rounded-sm',
+    "!left-auto !right-2 !top-2 !transform-none !border-none !bg-transparent !rounded-sm",
 };
 
 const Toaster = ({ ...props }: ToasterProps) => {