@vvedantb/ui 0.1.5 → 0.2.1

package/src/ai-elements/inline-citation.tsx

@@ -147,7 +147,7 @@ export const InlineCitationCarouselIndex = ({
   return (
     <div
       className={cn(
-        "flex flex-1 items-center justify-end px-3 py-1 text-muted text-xs",
+        "flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs",
         className,
       )}
       {...props}
@@ -178,7 +178,7 @@ export const InlineCitationCarouselPrev = ({
       type="button"
       {...props}
     >
-      <IconArrowLeft className="size-4 text-muted" />
+      <IconArrowLeft className="size-4 text-muted-foreground" />
     </button>
   );
 };
@@ -204,7 +204,7 @@ export const InlineCitationCarouselNext = ({
       type="button"
       {...props}
     >
-      <IconArrowRight className="size-4 text-muted" />
+      <IconArrowRight className="size-4 text-muted-foreground" />
     </button>
   );
 };
@@ -225,9 +225,9 @@ export const InlineCitationSource = ({
     {title && (
       <h4 className="truncate font-medium text-sm leading-tight">{title}</h4>
     )}
-    {url && <p className="truncate break-all text-muted text-xs">{url}</p>}
+    {url && <p className="truncate break-all text-muted-foreground text-xs">{url}</p>}
     {description && (
-      <p className="line-clamp-3 text-muted text-sm leading-relaxed">
+      <p className="line-clamp-3 text-muted-foreground text-sm leading-relaxed">
         {description}
       </p>
     )}
@@ -242,7 +242,7 @@ export const InlineCitationQuote = ({
 }: InlineCitationQuoteProps) => (
   <blockquote
     className={cn(
-      "border-l-2 border-separator pl-3 text-muted text-sm italic",
+      "border-l-2 border-separator pl-3 text-muted-foreground text-sm italic",
       className,
     )}
     {...props}

package/src/ai-elements/message.tsx

@@ -34,7 +34,7 @@ export const MessageContent = ({
   <div
     className={cn(
       "flex w-fit min-w-0 max-w-full flex-col gap-2 overflow-hidden text-sm",
-      "group-[.is-user]:ml-auto group-[.is-user]:rounded-2xl group-[.is-user]:rounded-br-md group-[.is-user]:bg-accent group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-accent-foreground",
+      "group-[.is-user]:ml-auto group-[.is-user]:rounded-2xl group-[.is-user]:rounded-br-md group-[.is-user]:bg-primary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-primary-foreground",
       "group-[.is-assistant]:px-0 group-[.is-assistant]:text-foreground",
       className,
     )}
@@ -242,7 +242,7 @@ export const MessageBranchPage = ({
   return (
     <ButtonGroupText
       className={cn(
-        "border-none bg-transparent text-muted shadow-none",
+        "border-none bg-transparent text-muted-foreground shadow-none",
         className,
       )}
       {...props}

package/src/ai-elements/prompt-input.tsx

@@ -774,7 +774,7 @@ export const PromptInputButton = ({
       <TooltipTrigger asChild>{button}</TooltipTrigger>
       <TooltipContent side={side}>
         {tooltipContent}
-        {shortcut && <span className="ml-2 text-muted">{shortcut}</span>}
+        {shortcut && <span className="ml-2 text-muted-foreground">{shortcut}</span>}
       </TooltipContent>
     </Tooltip>
   );
@@ -871,7 +871,7 @@ export const PromptInputModelSelectTrigger = ({
 }: PromptInputModelSelectTriggerProps) => (
   <SelectTrigger
     className={cn(
-      "border-none bg-transparent font-medium text-muted shadow-none transition-[color,transform] duration-150 ease-out active:scale-[0.97]",
+      "border-none bg-transparent font-medium text-muted-foreground shadow-none transition-[color,transform] duration-150 ease-out active:scale-[0.97]",
       "hover:bg-surface-secondary hover:text-foreground",
       segmentExpandedStateClass,
       className,
@@ -943,7 +943,7 @@ export const PromptInputTabLabel = ({
   ...props
 }: PromptInputTabLabelProps) => (
   <h3
-    className={cn("mb-2 px-3 font-medium text-muted text-xs", className)}
+    className={cn("mb-2 px-3 font-medium text-muted-foreground text-xs", className)}
     {...props}
   />
 );

package/src/ai-elements/queue.tsx

@@ -73,7 +73,7 @@ export function QueueHeader({
       )}
     >
       <div className="flex items-center gap-2">
-        <IconStack2 size={16} className="text-muted" />
+        <IconStack2 size={16} className="text-muted-foreground" />
         <span className="text-sm font-medium text-foreground">
           Queued Messages
         </span>
@@ -84,7 +84,7 @@ export function QueueHeader({
       <IconChevronDown
         size={16}
         className={cn(
-          "text-muted transition-transform duration-200 ease-out",
+          "text-muted-foreground transition-transform duration-200 ease-out",
           isOpen && "rotate-180",
         )}
       />

package/src/ai-elements/reasoning.tsx

@@ -137,7 +137,7 @@ export function ReasoningTrigger({
   return (
     <CollapsibleTrigger
       className={cn(
-        "flex w-full items-center gap-2 py-1 text-sm text-muted transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:text-foreground",
+        "flex w-full items-center gap-2 py-1 text-sm text-muted-foreground transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:text-foreground",
         className,
       )}
       {...props}

package/src/ai-elements/shimmer.tsx

@@ -26,11 +26,11 @@ function Shimmer({
     "--spread": `${totalSpread}px`,
     "--bg": `linear-gradient(
             90deg,
-            var(--muted) 0%,
-            var(--foreground) calc(50% - var(--spread)),
-            var(--muted) 50%,
-            var(--foreground) calc(50% + var(--spread)),
-            var(--muted) 100%
+            var(--color-muted-foreground, var(--muted)) 0%,
+            var(--color-foreground, var(--foreground)) calc(50% - var(--spread)),
+            var(--color-muted-foreground, var(--muted)) 50%,
+            var(--color-foreground, var(--foreground)) calc(50% + var(--spread)),
+            var(--color-muted-foreground, var(--muted)) 100%
           )`,
     backgroundImage: "var(--bg)",
     backgroundSize: "200% 100%",

package/src/ai-elements/sources.tsx

@@ -28,7 +28,7 @@ export const SourcesTrigger = ({
 }: SourcesTriggerProps) => (
   <CollapsibleTrigger
     className={cn(
-      "group inline-flex items-center gap-1.5 text-xs text-muted transition-[color,transform] duration-150 ease-out active:scale-[0.97] hover:text-foreground",
+      "group inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-[color,transform] duration-150 ease-out active:scale-[0.97] hover:text-foreground",
       className,
     )}
     {...props}
@@ -63,7 +63,7 @@ export const Source = ({
 }: SourceProps) => (
   <a
     className={cn(
-      "flex items-center justify-between gap-2 rounded-md px-3 py-2 text-xs text-muted transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary hover:text-foreground",
+      "flex items-center justify-between gap-2 rounded-md px-3 py-2 text-xs text-muted-foreground transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary hover:text-foreground",
       className,
     )}
     href={href}

package/src/ai-elements/speech-input.tsx

@@ -251,7 +251,7 @@ export const SpeechInput = ({
           "relative z-10 rounded-full transition-[background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out",
           isListening
             ? "bg-danger text-danger-foreground hover:bg-danger/80 hover:text-danger-foreground"
-            : "bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground",
+            : "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",
           className,
         )}
         disabled={isDisabled}

package/src/ai-elements/suggestion.tsx

@@ -6,7 +6,7 @@ import { cn } from "../utils/cn";
 import { flatInteractiveClass } from "../ui/surface-classes";
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
 import { AnimatePresence, motion } from "motion/react";
-import { fastTransition } from "../motion/presets.vibot";
+import { fastTransition } from "../motion/presets.alt";
 export type SuggestionsProps = {
   className?: string;
   children?: ReactNode;
@@ -176,7 +176,7 @@ export const Suggestion = ({
   return (
     <Button
       className={cn(
-        "h-auto cursor-pointer rounded-full bg-surface-secondary px-3 py-1.5 text-sm text-muted hover:bg-surface-tertiary hover:text-foreground",
+        "h-auto cursor-pointer rounded-full bg-surface-secondary px-3 py-1.5 text-sm text-muted-foreground hover:bg-surface-tertiary hover:text-foreground",
         className,
       )}
       onClick={handleClick}

package/src/index.ts

@@ -1,4 +1,4 @@
-// Colour, radius, shadow and font tokens live in @vvedantb/tokens. Import that
+// Colour, radius, shadow and font tokens live in @vvedantb/ui/tokens. Import that
 // stylesheet in the app. This package does not ship a second token set.
 export { cn } from "./utils/cn";
 export { floatingSurfaceClass } from "./ui/_menu-classes";
@@ -55,30 +55,30 @@ export * from "./ui/sheet";
 export * from "./ui/visually-hidden";
 export * from "./ui/clearInputDissolve";
 
-// Dual copies: richer file uses the plain name; the other keeps a suffix.
+// Dual copies: the richer file uses the plain name; the other keeps an `Alt` suffix.
 export * from "./ui/accordion";
 export {
-  Accordion as AccordionVerve,
-  AccordionItem as AccordionItemVerve,
-  AccordionTrigger as AccordionTriggerVerve,
-  AccordionContent as AccordionContentVerve,
-} from "./ui/accordion.verve";
+  Accordion as AccordionAlt,
+  AccordionItem as AccordionItemAlt,
+  AccordionTrigger as AccordionTriggerAlt,
+  AccordionContent as AccordionContentAlt,
+} from "./ui/accordion.alt";
 export * from "./ui/clear-input";
-export { ClearInput as ClearInputVibot } from "./ui/clear-input.vibot";
+export { ClearInput as ClearInputAlt } from "./ui/clear-input.alt";
 export * from "./ui/input-group";
 export {
-  InputGroup as InputGroupVerve,
-  InputGroupAddon as InputGroupAddonVerve,
-  InputGroupButton as InputGroupButtonVerve,
-  InputGroupText as InputGroupTextVerve,
-  InputGroupInput as InputGroupInputVerve,
-  InputGroupTextarea as InputGroupTextareaVerve,
-} from "./ui/input-group.verve";
+  InputGroup as InputGroupAlt,
+  InputGroupAddon as InputGroupAddonAlt,
+  InputGroupButton as InputGroupButtonAlt,
+  InputGroupText as InputGroupTextAlt,
+  InputGroupInput as InputGroupInputAlt,
+  InputGroupTextarea as InputGroupTextareaAlt,
+} from "./ui/input-group.alt";
 export * from "./ui/scroll-area";
 export {
-  ScrollArea as ScrollAreaVerve,
-  ScrollBar as ScrollBarVerve,
-} from "./ui/scroll-area.verve";
+  ScrollArea as ScrollAreaAlt,
+  ScrollBar as ScrollBarAlt,
+} from "./ui/scroll-area.alt";
 
 export * from "./ai-elements/artifact";
 export * from "./ai-elements/attachments";

package/src/ui/{_menu-classes.vibot.ts → _menu-classes.alt.ts}

@@ -1,4 +1,4 @@
-/** Eva-aligned floating overlay shell — tone + smooth-shadow-ring, no hairline. */
+/** Floating overlay shell: tone + smooth-shadow-ring, no hairline. */
 export const floatingSurfaceClass =
   "rounded-lg bg-overlay text-overlay-foreground smooth-shadow-ring-lg";
 
@@ -9,7 +9,7 @@ export const floatingSurfaceAnimateClass = [
   "origin-(--radix-popper-transform-origin) data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=open]:duration-200 data-[state=closed]:duration-150 data-[state=open]:ease-[cubic-bezier(0.32,0.72,0,1)] data-[state=closed]:ease-[cubic-bezier(0.32,0.72,0,1)]",
 ].join(" ");
 
-/** Shared floating menu surfaces — matches Eva's popover + smooth-shadow-ring-lg. */
+/** Shared floating menu surfaces: popover tone + smooth-shadow-ring-lg. */
 export const menuContentClass = [
   "z-50 min-w-48 overflow-hidden p-1.5 outline-hidden",
   floatingSurfaceClass,
@@ -26,8 +26,8 @@ export const menuCheckboxRadioItemClass =
   "relative flex cursor-pointer select-none items-center rounded-md py-2 pl-8 pr-2.5 text-sm outline-hidden transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] focus:bg-default focus:text-foreground data-highlighted:bg-default data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50";
 
 export const menuLabelClass =
-  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted";
+  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted-foreground";
 
 export const menuSeparatorClass = "-mx-1.5 my-1 h-px bg-separator";
 
-export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted/90";
+export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted-foreground/90";

package/src/ui/_menu-classes.ts

@@ -1,4 +1,4 @@
-// eva-aligned floating overlay: tone + smooth-shadow-ring, never border+shadow
+// floating overlay: tone + smooth-shadow-ring, never border+shadow
 export const floatingSurfaceClass =
   "rounded-lg bg-overlay text-overlay-foreground smooth-shadow-ring-lg max-sm:max-w-[calc(100vw-2rem)]";
 
@@ -6,7 +6,7 @@ export const floatingSurfaceAnimateClass = [
   "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 ].join(" ");
 
-// shared floating menu surfaces, matches eva popover + smooth-shadow-ring-lg
+// shared floating menu surfaces: popover tone + smooth-shadow-ring-lg
 export const menuContentClass = [
   "z-50 min-w-[12rem] overflow-hidden p-1.5 outline-none max-sm:max-h-[85dvh] max-sm:overflow-y-auto",
   floatingSurfaceClass,
@@ -23,8 +23,8 @@ export const menuCheckboxRadioItemClass =
   "relative flex cursor-pointer select-none items-center rounded-md py-2 max-sm:min-h-10 pl-8 pr-2.5 text-sm outline-none transition-[background-color,color] focus:bg-default focus:text-foreground data-[highlighted]:bg-default data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50";
 
 export const menuLabelClass =
-  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted";
+  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted-foreground";
 
 export const menuSeparatorClass = "-mx-1.5 my-1 h-px bg-separator";
 
-export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted/90";
+export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted-foreground/90";

package/src/ui/{accordion.verve.tsx → accordion.alt.tsx}

@@ -31,7 +31,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <IconChevronDown className="h-4 w-4 shrink-0 text-muted transition-transform duration-200" />
+      <IconChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
@@ -46,7 +46,7 @@ const AccordionContent = React.forwardRef<
     className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
-    <div className={cn("pb-4 pt-0 text-muted", className)}>
+    <div className={cn("pb-4 pt-0 text-muted-foreground", className)}>
       {children}
     </div>
   </AccordionPrimitive.Content>

package/src/ui/badge.tsx

@@ -9,7 +9,7 @@ const badgeVariants = cva(
         default: "border-border bg-default text-foreground",
         secondary: "border-separator bg-default text-default-foreground",
         destructive: "border-danger/25 bg-danger/12 text-danger",
-        outline: "border-separator bg-transparent text-muted",
+        outline: "border-separator bg-transparent text-muted-foreground",
         success: "border-success/25 bg-success/12 text-success",
         warning: "border-warning/25 bg-warning/12 text-warning",
       },

package/src/ui/breadcrumb.tsx

@@ -48,7 +48,7 @@ const BreadcrumbLink = React.forwardRef<
     <Comp
       ref={ref}
       className={cn(
-        "min-w-0 truncate font-medium text-muted transition-colors hover:text-foreground",
+        "min-w-0 truncate font-medium text-muted-foreground transition-colors hover:text-foreground",
         className,
       )}
       {...props}
@@ -74,7 +74,7 @@ BreadcrumbPage.displayName = "BreadcrumbPage";
 
 // separator rendered automatically between breadcrumb children
 const BreadcrumbSeparator = () => (
-  <span aria-hidden className="flex-shrink-0 text-muted/40">
+  <span aria-hidden className="flex-shrink-0 text-muted-foreground/40">
     /
   </span>
 );

package/src/ui/button.tsx

@@ -9,14 +9,14 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-accent text-accent-foreground hover:-translate-y-0.5 hover:opacity-90",
+          "bg-primary text-primary-foreground hover:-translate-y-0.5 hover:opacity-90",
         destructive:
           "bg-[oklch(47.2%_0.195_25.7)] text-white hover:bg-[oklch(42.5%_0.185_25.7)]",
         outline:
           "border border-border bg-transparent text-foreground hover:bg-default",
         secondary: "bg-default text-default-foreground hover:bg-default/78",
-        ghost: "text-muted hover:bg-surface-tertiary hover:text-foreground",
-        link: "text-accent underline-offset-4 hover:underline active:scale-100",
+        ghost: "text-muted-foreground hover:bg-surface-tertiary hover:text-foreground",
+        link: "text-primary underline-offset-4 hover:underline active:scale-100",
       },
       size: {
         default: "h-10 px-4 py-2",

package/src/ui/checkbox.tsx

@@ -10,7 +10,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer relative h-4 w-4 shrink-0 rounded-[4px] border border-border bg-field-background transition-[background-color,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground before:absolute before:inset-[-12px] before:content-['']",
+      "peer relative h-4 w-4 shrink-0 rounded-[4px] border border-border bg-field-background transition-[background-color,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground before:absolute before:inset-[-12px] before:content-['']",
       className,
     )}
     {...props}

package/src/ui/{clear-input.vibot.tsx → clear-input.alt.tsx}

@@ -57,7 +57,7 @@ const ClearInput = React.forwardRef<HTMLInputElement, ClearInputProps>(
           type="button"
           tabIndex={hasValue ? 0 : -1}
           className={cn(
-            "absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted transition-[opacity,background-color,color,transform] duration-150 ease-out active:duration-100 active:ease-out active:scale-[0.97] hover:bg-surface-tertiary hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring before:absolute before:inset-[-8px] before:content-['']",
+            "absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-[opacity,background-color,color,transform] duration-150 ease-out active:duration-100 active:ease-out active:scale-[0.97] hover:bg-surface-tertiary hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring before:absolute before:inset-[-8px] before:content-['']",
             hasValue ? "opacity-100" : "pointer-events-none opacity-0",
           )}
           aria-hidden={!hasValue}

package/src/ui/clear-input.tsx

@@ -152,7 +152,7 @@ const ClearInput = React.forwardRef<HTMLInputElement, ClearInputProps>(
         {value.length > 0 && !clearing ? (
           <button
             type="button"
-            className="t-clear-btn absolute right-2 top-1/2 z-4 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.92] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring"
+            className="t-clear-btn absolute right-2 top-1/2 z-4 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.92] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring"
             aria-label={clearLabel}
             onPointerDown={preventFocusSteal}
             onMouseDown={preventFocusSteal}

package/src/ui/command.tsx

@@ -28,7 +28,7 @@ function CommandDialog({
       <DialogContent className="overflow-hidden p-0 sm:max-w-xl">
         {/* The list is pinned rather than `max-h`: a palette that resizes on
             every keystroke shifts the whole dialog under the cursor. */}
-        <Command className="[&_[cmdk-list]]:h-80 [&_[cmdk-list]]:max-h-[60dvh] [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest [&_[cmdk-group-heading]]:text-muted [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-1.5 [&_[cmdk-input-wrapper]_svg]:h-4 [&_[cmdk-input-wrapper]_svg]:w-4 [&_[cmdk-input]]:h-11 [&_[cmdk-item]]:rounded-md [&_[cmdk-item]]:px-2.5 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4">
+        <Command className="[&_[cmdk-list]]:h-80 [&_[cmdk-list]]:max-h-[60dvh] [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-1.5 [&_[cmdk-input-wrapper]_svg]:h-4 [&_[cmdk-input-wrapper]_svg]:w-4 [&_[cmdk-input]]:h-11 [&_[cmdk-item]]:rounded-md [&_[cmdk-item]]:px-2.5 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4">
           {children}
         </Command>
       </DialogContent>
@@ -48,7 +48,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full max-sm:min-w-0 bg-transparent text-base sm:text-sm outline-none placeholder:text-muted disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-11 w-full max-sm:min-w-0 bg-transparent text-base sm:text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
@@ -75,7 +75,7 @@ const CommandEmpty = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className={cn("py-8 text-center text-sm text-muted", className)}
+    className={cn("py-8 text-center text-sm text-muted-foreground", className)}
     {...props}
   />
 ));
@@ -88,7 +88,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1.5 text-foreground [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest [&_[cmdk-group-heading]]:text-muted",
+      "overflow-hidden p-1.5 text-foreground [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest [&_[cmdk-group-heading]]:text-muted-foreground",
       className,
     )}
     {...props}
@@ -129,7 +129,7 @@ function CommandShortcut({
 }: React.HTMLAttributes<HTMLSpanElement>) {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-wide text-muted/90", className)}
+      className={cn("ml-auto text-xs tracking-wide text-muted-foreground/90", className)}
       {...props}
     />
   );

package/src/ui/dialog.tsx

@@ -251,7 +251,7 @@ const DialogDescription = React.forwardRef<
     ref={ref}
     className={cn(
       // `--muted` is ~3.5:1 on overlay; mix toward overlay-foreground for 4.5:1.
-      "text-sm leading-relaxed text-[color-mix(in_oklch,var(--overlay-foreground)_72%,var(--overlay))]",
+      "text-sm leading-relaxed text-[color-mix(in_oklch,var(--color-popover-foreground,var(--overlay-foreground))_72%,var(--color-popover,var(--overlay)))]",
       className,
     )}
     {...props}

package/src/ui/{input-group.verve.tsx → input-group.alt.tsx}

@@ -102,7 +102,7 @@ function InputGroupText({
   return (
     <span
       className={cn(
-        "flex items-center text-sm text-muted/95",
+        "flex items-center text-sm text-muted-foreground/95",
         className,
       )}
       {...props}

package/src/ui/input-group.tsx

@@ -30,7 +30,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const inputGroupAddonVariants = cva(
-  "text-muted flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-md group-data-[disabled=true]/input-group:opacity-50",
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-md group-data-[disabled=true]/input-group:opacity-50",
   {
     variants: {
       align: {
@@ -112,7 +112,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       className={cn(
-        "text-muted flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

package/src/ui/kbd.tsx

@@ -6,7 +6,7 @@ const Kbd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
     <kbd
       ref={ref}
       className={cn(
-        "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-md bg-surface-secondary px-1.5 font-mono text-[10px] font-medium text-muted",
+        "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-md bg-surface-secondary px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
         className,
       )}
       {...props}

package/src/ui/labeled-switch-row.tsx

@@ -27,14 +27,14 @@ export function LabeledSwitchRow({
     <div className="flex items-center justify-between gap-3 max-sm:flex-wrap">
       <div className="flex min-w-0 items-start gap-2">
         {icon ? (
-          <span className="mt-0.5 shrink-0 text-muted">{icon}</span>
+          <span className="mt-0.5 shrink-0 text-muted-foreground">{icon}</span>
         ) : null}
         <div className="min-w-0">
           <Label htmlFor={id} className="text-sm font-medium">
             {label}
           </Label>
           {description ? (
-            <p className="mt-1 text-xs text-muted text-pretty">{description}</p>
+            <p className="mt-1 text-xs text-muted-foreground text-pretty">{description}</p>
           ) : null}
         </div>
       </div>

package/src/ui/progress.tsx

@@ -15,7 +15,7 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 rounded-full bg-accent transition-transform duration-300 ease-smooth"
+      className="h-full w-full flex-1 rounded-full bg-primary transition-transform duration-300 ease-smooth"
       style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
     />
   </ProgressPrimitive.Root>

package/src/ui/radix-select.tsx

@@ -40,7 +40,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-2 rounded-field border border-border bg-field-background px-3.5 py-2 text-sm whitespace-nowrap ring-offset-background transition-[border-color,box-shadow,background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out active:scale-[0.98] placeholder:text-field-placeholder focus-visible:border-focus-border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger data-placeholder:text-muted [&_svg:not([class*='text-'])]:text-muted data-[size=default]:h-10 data-[size=sm]:h-8 data-[slot=select-value]:*:line-clamp-1 data-[slot=select-value]:*:flex data-[slot=select-value]:*:items-center data-[slot=select-value]:*:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-2 rounded-field border border-border bg-field-background px-3.5 py-2 text-sm whitespace-nowrap ring-offset-background transition-[border-color,box-shadow,background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out active:scale-[0.98] placeholder:text-field-placeholder focus-visible:border-focus-border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-8 data-[slot=select-value]:*:line-clamp-1 data-[slot=select-value]:*:flex data-[slot=select-value]:*:items-center data-[slot=select-value]:*:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -100,7 +100,7 @@ function SelectLabel({
     <SelectPrimitive.Label
       data-slot="select-label"
       className={cn(
-        "text-muted px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest",
+        "text-muted-foreground px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest",
         className,
       )}
       {...props}
@@ -117,7 +117,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "[&_svg:not([class*='text-'])]:text-muted relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pl-2.5 pr-8 text-sm outline-hidden [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 last:[span]:*:flex last:[span]:*:items-center last:[span]:*:gap-2",
+        "[&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pl-2.5 pr-8 text-sm outline-hidden [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 last:[span]:*:flex last:[span]:*:items-center last:[span]:*:gap-2",
         menuItemClass,
         className,
       )}

package/src/ui/search-input.tsx

@@ -16,7 +16,7 @@ const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
         leading={
           <IconSearch
             size={16}
-            className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 shrink-0 text-muted"
+            className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 shrink-0 text-muted-foreground"
           />
         }
         {...props}

package/src/ui/select.tsx

@@ -25,7 +25,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <IconChevronDown className="h-4 w-4 text-muted/85" />
+      <IconChevronDown className="h-4 w-4 text-muted-foreground/85" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -38,7 +38,7 @@ const SelectScrollUpButton = React.forwardRef<
   <SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1 text-muted",
+      "flex cursor-default items-center justify-center py-1 text-muted-foreground",
       className,
     )}
     {...props}
@@ -55,7 +55,7 @@ const SelectScrollDownButton = React.forwardRef<
   <SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1 text-muted",
+      "flex cursor-default items-center justify-center py-1 text-muted-foreground",
       className,
     )}
     {...props}
@@ -107,7 +107,7 @@ const SelectLabel = React.forwardRef<
   <SelectPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted",
+      "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted-foreground",
       className,
     )}
     {...props}

package/src/ui/sonner.tsx

@@ -25,18 +25,18 @@ function SonnerToaster(props: ToasterProps) {
           toast:
             "group toast glass-panel-strong flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm text-foreground smooth-shadow-ring-md",
           title: "font-medium leading-snug",
-          description: "text-[13px] leading-snug text-muted",
+          description: "text-[13px] leading-snug text-muted-foreground",
           actionButton:
-            "rounded-lg bg-accent px-2.5 py-1 text-xs font-medium text-accent-foreground transition-opacity hover:opacity-90",
+            "rounded-lg bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90",
           cancelButton:
-            "rounded-lg bg-surface-secondary px-2.5 py-1 text-xs font-medium text-muted transition-colors hover:bg-surface-tertiary",
+            "rounded-lg bg-surface-secondary px-2.5 py-1 text-xs font-medium text-muted-foreground transition-colors hover:bg-surface-tertiary",
           closeButton:
             "rounded-lg bg-default px-2.5 py-1 text-xs font-medium text-foreground transition-colors hover:bg-default/78",
-          loader: "text-muted",
+          loader: "text-muted-foreground",
           success: "[&_[data-icon]]:text-success",
           error: "[&_[data-icon]]:text-danger",
           warning: "[&_[data-icon]]:text-warning",
-          info: "[&_[data-icon]]:text-accent",
+          info: "[&_[data-icon]]:text-primary",
         },
       }}
       {...props}