lfg

components/aside.tsx

@@ -231,8 +231,8 @@ const asideLinkStyles = tv({
   base: "relative block group focus:outline-none focus-visible:bg-muted/50 focus-visible:ring-inset focus-visible:ring-1 focus-visible:ring-primary rounded-lg pl-2.5 h-9 text-base transition-colors hover:bg-muted/60 hover:text-fg lg:text-sm",
   variants: {
     isActive: {
-      true: "font-medium text-fg",
-      false: "text-muted-fg"
+      false: "text-muted-fg forced-colors:text-[Gray] hover:text-fg",
+      true: "text-fg forced-colors:text-[LinkText]"
     }
   }
 })
@@ -247,7 +247,7 @@ function AsideLink({ indicatorClassName, className, children, ...props }: AsideL
         <motion.span
           layoutId="current-indicator-sidebar"
           className={cn(
-            "absolute inset-y-1 left-[1rem] w-0.5 rounded-full bg-fg",
+            "absolute inset-y-1 left-[1rem] w-0.5 rounded-full bg-fg forced-colors:bg-[Highlight]",
             indicatorClassName
           )}
         />

components/doc-how.tsx

@@ -40,7 +40,7 @@ export function DocHow({
   codeString = codeString.replace(/function\s+\w+\s*\(/g, "function App(")
   const divProps = { ...props } as React.HTMLProps<HTMLDivElement>
   return (
-    <div className={cn("not-prose relative my-4", className)} {...divProps}>
+    <div className={cn("not-prose forced-color-adjust-non relative my-4", className)} {...divProps}>
       <Tabs aria-label="Packages">
         <TabsList fullscreenUrl={fullscreenUrl} />
         <Tabs.Panel className="w-full" id="preview">
@@ -85,10 +85,10 @@ const tabStyles = tv({
   ],
   variants: {
     isSelected: {
-      false: "text-muted-fg",
-      true: "text-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
+      false: "text-muted-fg forced-colors:text-[Gray] forced-colors:hover:text-[MenuText]",
+      true: "text-fg forced-colors:text-[MenuText] forced-colors:hover:text-[MenuText]"
     },
-    isFocused: { false: "ring-0", true: "text-fg" },
+    isFocused: { false: "ring-0", true: "text-fg forced-colors:text-[MenuText]" },
     isDisabled: {
       true: "text-muted-fg/50 forced-colors:text-[GrayText] forced-colors:selected:bg-[GrayText] forced-colors:selected:text-[HighlightText]"
     }
@@ -114,7 +114,7 @@ const Tab = ({ children, ...props }: TabProps) => {
               layoutId="current_indicator"
               transition={{ type: "spring", bounce: 0.25, duration: 0.5 }}
               className={cn(
-                "absolute rounded bg-fg",
+                "absolute rounded bg-fg forced-colors:bg-[ActiveBorder]",
                 "group-orientation-horizontal:inset-x-0 group-orientation-horizontal:-bottom-px group-orientation-horizontal:h-0.5 group-orientation-horizontal:w-full group-orientation-vertical:left-0 group-orientation-vertical:h-[calc(100%-10%)] group-orientation-vertical:w-0.5 group-orientation-vertical:transform"
               )}
             />

components/nav-item.tsx

@@ -11,8 +11,8 @@ const navLinkStyles = tv({
   base: "relative flex focus-visible:text-fg items-center gap-x-3 tracking-tight py-2 text-sm text-muted-fg transition-colors focus:outline-none sm:py-3",
   variants: {
     isActive: {
-      true: "text-fg",
-      false: "text-muted-fg hover:text-fg"
+      false: "text-muted-fg hover:text-fg forced-colors:text-[Gray]",
+      true: "text-fg forced-colors:text-[WindowText]"
     }
   }
 })

components/table-of-contents.tsx

@@ -56,7 +56,7 @@ export function TableOfContents({ className, items }: Props) {
     <aside
       ref={tocRef}
       className={cn(
-        "not-prose",
+        "not-prose forced-color-adjust-none",
         "xl:sticky no-scrollbar xl:top-[1.75rem] xl:-mr-6 xl:h-[calc(100vh-4.75rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6",
         isProBannerVisible ? "top-32" : "top-20",
         className
@@ -113,7 +113,9 @@ function TocLink({ item, activeId }: { item: TableOfContentsProps; activeId: str
       <Link
         className={cn(
           "outline-none block no-underline tracking-tight lg:text-[0.885rem] duration-200",
-          item.url.split("#")[1] === activeId ? "text-fg" : "text-muted-fg/90"
+          item.url.split("#")[1] === activeId
+            ? "text-fg forced-colors:text-[Highlight]"
+            : "text-muted-fg/90 forced-colors:text-[GrayText]"
         )}
         href={item.url}
       >

components/ui/calendar.tsx

@@ -21,11 +21,12 @@ import { cr, ctr, focusRing } from "./primitive"
 
 const cellStyles = tv({
   extend: focusRing,
-  base: "flex size-10 sm:size-9 cursor-default tabular-nums items-center justify-center rounded-full lg:text-sm forced-color-adjust-none",
+  base: "flex size-10 sm:size-9 cursor-default tabular-nums items-center justify-center rounded-full lg:text-sm forced-colors:outline-0",
   variants: {
     isSelected: {
-      false: "text-fg hover:bg-secondary-fg/15 pressed:bg-secondary-fg/20",
-      true: "bg-primary text-primary-fg invalid:bg-danger invalid:text-danger-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:invalid:bg-[Mark]"
+      false:
+        "text-fg forced-colors:text-[ButtonText] hover:bg-secondary-fg/15 pressed:bg-secondary-fg/20",
+      true: "bg-primary text-primary-fg invalid:bg-danger invalid:text-danger-fg forced-colors:bg-[Highlight] forced-colors:text-[Highlight] forced-colors:invalid:bg-[Mark]"
     },
     isDisabled: {
       true: "text-muted-fg/70 forced-colors:text-[GrayText]"

components/ui/command-menu.tsx

@@ -23,7 +23,7 @@ const commandStyles = tv({
     ],
     list: "overflow-y-auto lg:pb-0 max-h-[calc(100vh-35%)] pb-16 [&:not(:has(.xda32kfseccmd))]:p-2 [&:not(:has(.xda32kfseccmd))_.s3xsprt]:my-2 overflow-x-hidden md:max-h-[456px]",
     input: [
-      "flex w-full rounded-md bg-transparent text-base placeholder:text-muted-fg",
+      "flex w-full rounded-md forced-colors:focus:outline-0 bg-transparent text-base placeholder:text-muted-fg",
       "focus:outline-none",
       "disabled:opacity-50 disabled:cursor-not-allowed"
     ],
@@ -32,7 +32,7 @@ const commandStyles = tv({
       "[&_[cmdk-group-heading]]:select-none [&_[cmdk-group-heading]]:ml-[1px] [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-[0.8rem] [&_[cmdk-group-heading]]:text-muted-fg"
     ],
     modal: [
-      "fixed bottom-0 left-[50%] top-auto z-50 grid h-[calc(100vh-35%)] w-full max-w-full translate-x-[-50%] gap-4 overflow-hidden rounded-t-xl bg-overlay text-overlay-fg shadow-lg ring-1 ring-dark/5 dark:ring-border sm:bottom-auto sm:top-[6rem] sm:h-auto sm:w-full sm:max-w-2xl sm:rounded-xl",
+      "fixed bottom-0 left-[50%] top-auto z-50 grid h-[calc(100vh-35%)] w-full max-w-full translate-x-[-50%] gap-4 overflow-hidden rounded-t-xl bg-overlay text-overlay-fg shadow-lg forced-colors:border ring-1 ring-dark/5 dark:ring-border sm:bottom-auto sm:top-[6rem] sm:h-auto sm:w-full sm:max-w-2xl sm:rounded-xl",
       "sm:entering:slide-in-from-bottom-auto entering:duration-300 entering:animate-in entering:fade-in-0 entering:slide-in-from-bottom-1/2 entering:slide-in-from-left-1/2 entering:[transition-timing-function:ease-out] sm:entering:duration-300 sm:entering:slide-in-from-top-[2rem]",
       "exiting:duration-300 exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-bottom-1/2 exiting:slide-out-to-left-1/2 exiting:[transition-timing-function:ease] sm:exiting:slide-out-to-top-[4rem]"
     ],
@@ -45,13 +45,14 @@ const commandStyles = tv({
     kbdKeyboard: "lg:block hidden group-data-[selected=true]:opacity-60",
     description: "sm:inline hidden text-sm ml-auto",
     item: [
-      "group relative flex cursor-default select-none items-center rounded-lg py-2 text-sm outline-none",
-      "data-[selected=true]:bg-accent data-[selected=true]:text-accent-fg [&[data-selected=true]_[data-slot=icon]]:text-accent-fg",
+      "group relative flex forced-colors:outline-0 cursor-default select-none text-fg items-center rounded-lg py-2 text-sm outline-none",
+      "data-[selected=true]:bg-accent forced-colors:data-[selected=true]:bg-[Highlight] forced-colors:data-[selected=true]:text-[ActiveCaption] forced-colors:text-[WindowText] data-[selected=true]:text-accent-fg [&[data-selected=true]_[data-slot=icon]]:text-accent-fg",
       "focus-visible:bg-accent focus-visible:text-accent-fg [&:focus-visible_[data-slot=icon]]:text-accent-fg",
       "data-[danger=true]:text-danger data-[danger=true]:data-[selected=true]:bg-danger data-[danger=true]:data-[selected=true]:text-danger-fg",
       "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
       "[&_[data-slot=icon]]:mr-2 [&_[data-slot=icon]]:size-[1.10rem] [&_[data-slot=icon]]:shrink-0 [&_[data-slot=icon]]:text-muted-fg",
-      "[&_[data-slot=avatar]]:mr-2 [&_[data-slot=avatar]]:size-[1.10rem] [&_[data-slot=avatar]]:shrink-0"
+      "[&_[data-slot=avatar]]:mr-2 [&_[data-slot=avatar]]:size-[1.10rem] [&_[data-slot=avatar]]:shrink-0",
+      "forced-colors:[&_[data-slot=icon]]:text-[CanvasText] forced-colors:[&_[data-slot=icon]]:group-data-[focus]:text-[Canvas] "
     ]
   },
 

components/ui/dropdown.tsx

@@ -19,22 +19,22 @@ import { cn, cr } from "./primitive"
 
 const dropdownItemStyles = tv({
   base: [
-    "group flex cursor-default select-none items-center gap-x-1.5 rounded-[calc(var(--radius)-1px)] py-2 px-2.5 relative text-base outline outline-0 forced-color-adjust-none lg:text-sm",
+    "group text-fg forced-colors:text-[LinkText] flex cursor-default forced-color-adjust-none select-none items-center gap-x-1.5 rounded-[calc(var(--radius)-1px)] py-2 px-2.5 relative text-base outline outline-0 forced-color:text-[Highlight] lg:text-sm",
     "has-submenu:open:data-[danger=true]:bg-danger/20 has-submenu:open:data-[danger=true]:text-danger",
     "has-submenu:open:bg-accent has-submenu:open:text-accent-fg [&[data-has-submenu][data-open]_[data-slot=icon]]:text-accent-fg",
     "[&_[data-slot=avatar]]:-mr-0.5 [&_[data-slot=avatar]]:size-6 sm:[&_[data-slot=avatar]]:size-5",
     "[&_[data-slot=icon]]:size-4 [&_[data-slot=icon]]:shrink-0 [&_[data-slot=icon]]:text-muted-fg [&[data-hovered]_[data-slot=icon]]:text-accent-fg [&[data-focused]_[data-slot=icon]]:text-accent-fg [&[data-danger]_[data-slot=icon]]:text-danger/60 [&[data-focused][data-danger]_[data-slot=icon]]:text-danger-fg",
+    "[&_[data-slot=menu-radio]>[data-slot=icon]]:size-3",
     "forced-colors:[&_[data-slot=icon]]:text-[CanvasText] forced-colors:[&_[data-slot=icon]]:group-data-[focus]:text-[Canvas] "
   ],
   variants: {
     isDisabled: {
-      false: "text-fg",
       true: "text-muted-fg forced-colors:text-[GrayText]"
     },
     isFocused: {
       false: "data-[danger=true]:text-danger",
       true: [
-        "bg-accent text-accent-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+        "bg-accent text-accent-fg forced-colors:text-[HighlightText] forced-colors:bg-[Highlight]",
         "data-[danger=true]:bg-danger data-[danger=true]:text-danger-fg",
         "[&_.text-muted-fg]:text-accent-fg/80 [&[data-slot=label]]:text-accent-fg [&[data-slot=description]]:text-accent-fg"
       ]

components/ui/keyboard.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 
 import { Keyboard as KeyboardPrimitive } from "react-aria-components"

components/ui/menu.tsx

@@ -155,7 +155,7 @@ const MenuHeader = ({ className, separator = false, ...props }: MenuHeaderProps)
 )
 
 const MenuSeparator = ({ className, ...props }: SeparatorProps) => (
-  <Separator className={cn("-mx-1 my-1 h-px ms bg-muted", className)} {...props} />
+  <Separator className={cn("-mx-1 my-1 h-px border-b border-b-muted", className)} {...props} />
 )
 
 const Checkbox = ({ className, children, ...props }: MenuItemProps) => (
@@ -174,16 +174,19 @@ const Checkbox = ({ className, children, ...props }: MenuItemProps) => (
 )
 
 const Radio = ({ className, children, ...props }: MenuItemProps) => (
-  <Item className={cn("pl-8 relative", className)} {...props}>
+  <Item className={cn("relative", className)} {...props}>
     {(values) => (
       <>
+        {typeof children === "function" ? children(values) : children}
+
         {values.isSelected && (
-          <span className="absolute left-3 flex size-[0.650rem] items-center animate-in justify-center">
-            <IconBulletFill className="size-[0.650rem]" />
+          <span
+            data-slot="menu-radio"
+            className="absolute right-3 flex items-center animate-in justify-center"
+          >
+            <IconBulletFill />
           </span>
         )}
-
-        {typeof children === "function" ? children(values) : children}
       </>
     )}
   </Item>

components/ui/navbar.tsx

@@ -203,7 +203,7 @@ const Section = ({ className, ...props }: React.ComponentProps<"div">) => {
 
 const navItemStyles = tv({
   base: [
-    "relative lg:text-sm px-2 flex items-center gap-x-2 [&>[data-slot=icon]]:-mx-0.5 text-muted-fg outline-none forced-colors:disabled:text-[GrayText] transition-colors",
+    "relative lg:text-sm px-2 flex forced-colors:outline-0 items-center gap-x-2 [&>[data-slot=icon]]:-mx-0.5 text-muted-fg outline-none forced-colors:disabled:text-[GrayText] forced-colors:transform-none transition-colors",
     "hover:text-fg focus:text-fg pressed:text-fg focus-visible:outline-1 focus-visible:outline-primary",
     "disabled:opacity-60 disabled:cursor-default",
     "[&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0"

components/ui/primitive.tsx

@@ -17,7 +17,7 @@ function composeTailwindRenderProps<T>(
 }
 
 const focusRing = tv({
-  base: "outline-none focus:outline-none forced-colors:outline-[Highlight]",
+  base: "outline-none focus:outline-none forced-colors:outline-1 forced-colors:outline-[Highlight]",
   variants: {
     isFocused: { true: "ring-4 ring-ring/20" },
     isInvalid: { true: "ring-4 ring-danger/20" }

components/ui/tabs.tsx

@@ -19,7 +19,7 @@ import { tv } from "tailwind-variants"
 import { cn, cr } from "./primitive"
 
 const tabsStyles = tv({
-  base: "group flex gap-4",
+  base: "group flex gap-4 forced-color-adjust-none",
   variants: {
     orientation: {
       horizontal: "flex-col",
@@ -43,10 +43,10 @@ const Tabs = (props: TabsProps) => {
 }
 
 const tabListStyles = tv({
-  base: "flex",
+  base: "flex forced-color-adjust-none",
   variants: {
     orientation: {
-      horizontal: "flex-row gap-x-5 border-b",
+      horizontal: "flex-row gap-x-5 border-b border-border",
       vertical: "flex-col items-start gap-y-4 border-l"
     }
   }
@@ -68,7 +68,7 @@ const List = <T extends object>(props: TabListProps<T>) => {
 
 const tabStyles = tv({
   base: [
-    "relative flex whitespace-nowrap cursor-default items-center rounded-full text-sm font-medium outline-none transition forced-color-adjust-none hover:text-fg [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:mr-2",
+    "relative flex whitespace-nowrap cursor-default items-center rounded-full text-sm font-medium outline-none transition hover:text-fg [&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:mr-2",
     // hor
     "group-orientation-vertical:w-full group-orientation-vertical:py-0 group-orientation-vertical:pl-4 group-orientation-vertical:pr-2",
     // ver
@@ -77,11 +77,11 @@ const tabStyles = tv({
   variants: {
     isSelected: {
       false: "text-muted-fg",
-      true: "text-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]"
+      true: "text-fg"
     },
     isFocused: { false: "ring-0", true: "text-fg" },
     isDisabled: {
-      true: "text-muted-fg/50 forced-colors:text-[GrayText] forced-colors:selected:bg-[GrayText] forced-colors:selected:text-[HighlightText]"
+      true: "text-muted-fg/50"
     }
   }
 })