@marimo-team/frontend 0.24.1-dev113 → 0.24.1-dev115

package/src/components/ui/__tests__/badge.test.ts

@@ -0,0 +1,63 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import { badgeVariants } from "../badge";
+
+describe("badgeVariants", () => {
+  it.each([
+    {
+      variant: "default" as const,
+      expected: [
+        "forced-colors:bg-[Highlight]",
+        "forced-colors:border-[Highlight]",
+        "forced-colors:text-[HighlightText]",
+        "forced-colors:hover:bg-[Highlight]",
+        "forced-colors:hover:text-[HighlightText]",
+      ],
+    },
+    {
+      variant: "defaultOutline" as const,
+      expected: [
+        "forced-colors:bg-[Canvas]",
+        "forced-colors:border-[Highlight]",
+        "forced-colors:text-[CanvasText]",
+      ],
+    },
+    {
+      variant: "secondary" as const,
+      expected: [
+        "forced-colors:bg-[ButtonFace]",
+        "forced-colors:border-[ButtonText]",
+        "forced-colors:text-[ButtonText]",
+        "forced-colors:hover:bg-[Highlight]",
+        "forced-colors:hover:text-[HighlightText]",
+      ],
+    },
+  ])("uses system colors for $variant", ({ variant, expected }) => {
+    const classes = badgeVariants({ variant });
+
+    expect(classes).toEqual(expect.stringContaining(expected.join(" ")));
+    expect(classes).toContain("forced-color-adjust-none");
+  });
+
+  it.each(["destructive", "success", "outline"] as const)(
+    "keeps the %s variant visible without semantic colors",
+    (variant) => {
+      const classes = badgeVariants({ variant });
+
+      expect(classes).toEqual(
+        expect.stringContaining(
+          [
+            "forced-colors:bg-[Canvas]",
+            "forced-colors:border-[ButtonText]",
+            "forced-colors:text-[CanvasText]",
+          ].join(" "),
+        ),
+      );
+      if (variant !== "outline") {
+        expect(classes).toContain("forced-colors:hover:bg-[Highlight]");
+        expect(classes).toContain("forced-colors:hover:text-[HighlightText]");
+      }
+    },
+  );
+});

package/src/components/ui/__tests__/button.test.ts

@@ -39,4 +39,23 @@ describe("buttonVariants", () => {
     expect(classes).not.toMatch(/--(?:red|grass|yellow)-/);
     expect(classes).not.toContain("dark:");
   });
+
+  it("uses system colors in forced-color mode", () => {
+    const classes = buttonVariants({ variant: "default" });
+
+    expect(classes).toEqual(
+      expect.stringContaining(
+        [
+          "forced-color-adjust-none",
+          "forced-colors:border-[ButtonText]",
+          "forced-colors:bg-[ButtonFace]",
+          "forced-colors:text-[ButtonText]",
+          "forced-colors:hover:bg-[Highlight]",
+          "forced-colors:hover:text-[HighlightText]",
+          "forced-colors:disabled:border-[GrayText]",
+          "forced-colors:disabled:text-[GrayText]",
+        ].join(" "),
+      ),
+    );
+  });
 });

package/src/components/ui/__tests__/menu-items.test.ts

@@ -0,0 +1,31 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import {
+  menuControlVariants,
+  menuItemVariants,
+  menuSubTriggerVariants,
+} from "../menu-items";
+
+describe("menu item variants", () => {
+  it.each([
+    menuSubTriggerVariants(),
+    menuControlVariants(),
+    menuItemVariants(),
+  ])("styles Radix highlighted state", (classes) => {
+    expect(classes).toContain("data-[highlighted]:bg-accent");
+    expect(classes).toContain(
+      "forced-colors:data-[highlighted]:bg-[Highlight]",
+    );
+    expect(classes).toContain(
+      "forced-colors:data-[highlighted]:text-[HighlightText]",
+    );
+  });
+
+  it("keeps the command item selected state", () => {
+    const classes = menuItemVariants();
+
+    expect(classes).toContain("aria-selected:bg-accent");
+    expect(classes).toContain("forced-colors:aria-selected:bg-[Highlight]");
+  });
+});

package/src/components/ui/badge.tsx

@@ -6,20 +6,22 @@ import * as React from "react";
 import { cn } from "@/utils/cn";
 
 const badgeVariants = cva(
-  "inline-flex items-center border rounded-full px-2 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center border rounded-full px-2 py-0.5 text-xs font-semibold transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 forced-color-adjust-none",
   {
     variants: {
       variant: {
         default:
-          "bg-primary hover:bg-primary/60 border-transparent text-primary-foreground",
-        defaultOutline: "bg-(--blue-2) border-(--blue-8) text-(--blue-11)",
+          "bg-primary hover:bg-primary/60 border-transparent text-primary-foreground forced-colors:bg-[Highlight] forced-colors:border-[Highlight] forced-colors:text-[HighlightText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText]",
+        defaultOutline:
+          "bg-(--blue-2) border-(--blue-8) text-(--blue-11) forced-colors:bg-[Canvas] forced-colors:border-[Highlight] forced-colors:text-[CanvasText]",
         secondary:
-          "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
+          "bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground forced-colors:bg-[ButtonFace] forced-colors:border-[ButtonText] forced-colors:text-[ButtonText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText]",
         destructive:
-          "bg-(--red-2) border-(--red-6) text-(--red-9) hover:bg-(--red-3)",
+          "bg-(--red-2) border-(--red-6) text-(--red-9) hover:bg-(--red-3) forced-colors:bg-[Canvas] forced-colors:border-[ButtonText] forced-colors:text-[CanvasText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText]",
         success:
-          "bg-(--grass-2) border-(--grass-5) text-(--grass-9) hover:bg-(--grass-3)",
-        outline: "text-foreground",
+          "bg-(--grass-2) border-(--grass-5) text-(--grass-9) hover:bg-(--grass-3) forced-colors:bg-[Canvas] forced-colors:border-[ButtonText] forced-colors:text-[CanvasText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText]",
+        outline:
+          "text-foreground forced-colors:bg-[Canvas] forced-colors:border-[ButtonText] forced-colors:text-[CanvasText]",
       },
     },
     defaultVariants: {

package/src/components/ui/button.tsx

@@ -14,6 +14,7 @@ const buttonVariants = cva(
   cn(
     "disabled:opacity-50 disabled:pointer-events-none",
     "inline-flex items-center justify-center rounded-md text-sm font-medium focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background",
+    "forced-color-adjust-none forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText] forced-colors:disabled:border-[GrayText] forced-colors:disabled:text-[GrayText]",
   ),
   {
     variants: {

package/src/components/ui/combobox.tsx

@@ -201,7 +201,7 @@ export const Combobox = <TValue,>({
             id={id}
             type="button"
             className={cn(
-              "flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid",
+              "flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-primary focus-visible:shadow-md-solid",
               disabled && "cursor-not-allowed opacity-50",
               className,
             )}

package/src/components/ui/date-input.tsx

@@ -29,7 +29,7 @@ const DateSegment = ({ className, ...props }: AriaDateSegmentProps) => {
           /* Disabled */
           "data-disabled:cursor-not-allowed data-disabled:opacity-50",
           /* Focused */
-          "data-focused:bg-accent data-focused:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+          "data-focused:bg-accent data-focused:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground",
           /* Invalid */
           "data-invalid:data-focused:bg-destructive data-invalid:data-focused:data-placeholder:text-destructive-foreground data-invalid:data-focused:text-destructive-foreground data-invalid:data-placeholder:text-destructive data-invalid:text-destructive",
           className,

package/src/components/ui/dialog.tsx

@@ -42,6 +42,7 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-background/80 backdrop-blur-xs transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+      "forced-color-adjust-none forced-colors:bg-[CanvasText] forced-colors:opacity-50",
       className,
     )}
     {...props}
@@ -63,13 +64,14 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-sm animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-2xl sm:mx-4 sm:rounded-lg sm:zoom-in-90 sm:data-[state=open]:slide-in-from-bottom-0",
+        "forced-color-adjust-none forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]",
         className,
       )}
       {...restoreFocus}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>

package/src/components/ui/menu-items.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { cn } from "@/utils/cn";
 
 export const menuContentCommon = cva(
-  "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+  "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md forced-color-adjust-none forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]",
   {
     variants: {
       subcontent: {
@@ -16,7 +16,7 @@ export const menuContentCommon = cva(
 );
 
 export const menuSubTriggerVariants = cva(
-  "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+  "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground forced-color-adjust-none forced-colors:data-[highlighted]:bg-[Highlight] forced-colors:data-[highlighted]:text-[HighlightText] forced-colors:data-[state=open]:bg-[Highlight] forced-colors:data-[state=open]:text-[HighlightText]",
   {
     variants: {
       inset: {
@@ -27,11 +27,11 @@ export const menuSubTriggerVariants = cva(
 );
 
 export const MENU_ITEM_DISABLED =
-  "data-disabled:pointer-events-none data-disabled:opacity-50";
+  "data-disabled:pointer-events-none data-disabled:opacity-50 forced-colors:data-disabled:text-[GrayText]";
 
 export const menuControlVariants = cva(
   cn(
-    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground",
+    "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground forced-color-adjust-none forced-colors:data-[highlighted]:bg-[Highlight] forced-colors:data-[highlighted]:text-[HighlightText]",
     MENU_ITEM_DISABLED,
   ),
   { variants: {} },
@@ -54,7 +54,7 @@ export const menuLabelVariants = cva("px-2 py-1.5 text-sm font-semibold", {
 
 export const menuItemVariants = cva(
   cn(
-    "menu-item relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden",
+    "menu-item relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden forced-color-adjust-none forced-colors:data-[highlighted]:bg-[Highlight] forced-colors:data-[highlighted]:text-[HighlightText] forced-colors:aria-selected:bg-[Highlight] forced-colors:aria-selected:text-[HighlightText]",
     MENU_ITEM_DISABLED,
   ),
   {
@@ -64,13 +64,13 @@ export const menuItemVariants = cva(
       },
       variant: {
         default:
-          "focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground",
+          "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground",
         danger:
-          "focus:bg-(--red-5) focus:text-(--red-12) aria-selected:bg-(--red-5) aria-selected:text-(--red-12)",
+          "data-[highlighted]:bg-(--red-5) data-[highlighted]:text-(--red-12) aria-selected:bg-(--red-5) aria-selected:text-(--red-12)",
         muted:
-          "focus:bg-muted/70 focus:text-muted-foreground aria-selected:bg-muted/70 aria-selected:text-muted-foreground",
+          "data-[highlighted]:bg-muted/70 data-[highlighted]:text-muted-foreground aria-selected:bg-muted/70 aria-selected:text-muted-foreground",
         success:
-          "focus:bg-(--grass-3) focus:text-(--grass-11) aria-selected:bg-(--grass-3) aria-selected:text-(--grass-11)",
+          "data-[highlighted]:bg-(--grass-3) data-[highlighted]:text-(--grass-11) aria-selected:bg-(--grass-3) aria-selected:text-(--grass-11)",
         disabled: "text-muted-foreground",
       },
     },

package/src/components/ui/native-select.tsx

@@ -6,12 +6,12 @@ import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 
 export const selectStyles = cva(
-  "flex h-6 w-fit mb-1 items-center justify-between rounded-sm bg-background px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer",
+  "flex h-6 w-fit mb-1 items-center justify-between rounded-sm bg-background px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer forced-color-adjust-none forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:disabled:text-[GrayText]",
   {
     variants: {
       variant: {
         default:
-          "shadow-xs-solid border border-input hover:shadow-sm-solid focus:border-primary focus:shadow-md-solid disabled:hover:shadow-xs-solid",
+          "shadow-xs-solid border border-input hover:shadow-sm-solid focus-visible:border-primary focus-visible:shadow-md-solid disabled:hover:shadow-xs-solid forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText]",
         ghost: "opacity-70 hover:opacity-100 focus:opacity-100",
       },
     },

package/src/components/ui/navigation.tsx

@@ -56,7 +56,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex rounded-md bg-background px-4 py-2 text-lg font-medium text-(--slate-12) transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50",
+  "group inline-flex rounded-md bg-background px-4 py-2 text-lg font-medium text-(--slate-12) transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50",
   {
     variants: {
       orientation: {

package/src/components/ui/range-slider.tsx

@@ -132,7 +132,7 @@ const RangeSlider = React.forwardRef<
         "relative flex touch-none select-none hover:cursor-pointer",
         "data-[orientation=horizontal]:w-full data-[orientation=horizontal]:items-center",
         "data-[orientation=vertical]:h-full data-[orientation=vertical]:justify-center",
-        "data-disabled:cursor-not-allowed",
+        "data-disabled:cursor-not-allowed forced-color-adjust-none",
         className,
       )}
       {...props}
@@ -142,6 +142,7 @@ const RangeSlider = React.forwardRef<
         data-testid="track"
         className={cn(
           "relative grow overflow-hidden rounded-full bg-slate-200 dark:bg-accent/60",
+          "forced-colors:border forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace]",
           "data-[orientation=horizontal]:h-2 data-[orientation=horizontal]:w-full",
           "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2",
         )}
@@ -150,6 +151,7 @@ const RangeSlider = React.forwardRef<
           data-testid="range"
           className={cn(
             "absolute bg-blue-500 dark:bg-primary",
+            "forced-colors:bg-[Highlight] forced-colors:data-disabled:bg-[GrayText]",
             "data-[orientation=horizontal]:h-full",
             "data-[orientation=vertical]:w-full",
             "data-disabled:opacity-50",
@@ -165,7 +167,7 @@ const RangeSlider = React.forwardRef<
           <TooltipTrigger asChild={true}>
             <SliderPrimitive.Thumb
               data-testid="thumb"
-              className="block h-4 w-4 rounded-full shadow-xs-solid border border-blue-500 dark:border-primary dark:bg-accent bg-white hover:bg-blue-300 focus:bg-blue-300 transition-colors focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50"
+              className="block h-4 w-4 rounded-full shadow-xs-solid border border-blue-500 dark:border-primary dark:bg-accent bg-white hover:bg-blue-300 focus:bg-blue-300 transition-colors focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace] forced-colors:data-disabled:border-[GrayText]"
               onFocus={openActions.setTrue}
               onBlur={openActions.setFalse}
               onMouseEnter={openActions.setTrue}
@@ -186,7 +188,7 @@ const RangeSlider = React.forwardRef<
           <TooltipTrigger asChild={true}>
             <SliderPrimitive.Thumb
               data-testid="thumb"
-              className="block h-4 w-4 rounded-full shadow-xs-solid border border-blue-500 dark:border-primary dark:bg-accent bg-white hover:bg-blue-300 focus:bg-blue-300 transition-colors focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50"
+              className="block h-4 w-4 rounded-full shadow-xs-solid border border-blue-500 dark:border-primary dark:bg-accent bg-white hover:bg-blue-300 focus:bg-blue-300 transition-colors focus-visible:outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace] forced-colors:data-disabled:border-[GrayText]"
               onFocus={openActions.setTrue}
               onBlur={openActions.setFalse}
               onMouseEnter={openActions.setTrue}

package/src/components/ui/select.tsx

@@ -125,7 +125,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground forced-colors:data-[highlighted]:bg-[Highlight] forced-colors:data-[highlighted]:text-[HighlightText]",
       MENU_ITEM_DISABLED,
       className,
     )}

package/src/components/ui/sheet.tsx

@@ -68,7 +68,7 @@ const SheetContent = React.forwardRef<
         {...props}
       >
         {children}
-        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
           <Cross2Icon className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </SheetPrimitive.Close>

package/src/components/ui/toast.tsx

@@ -26,15 +26,16 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const VARIANT_CLASSES = {
-  default: "bg-background border",
+  default:
+    "bg-background border forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]",
   danger:
-    "group destructive text-error border-destructive bg-(--red-1) shadow-md-solid shadow-error",
+    "group destructive text-error border-destructive bg-(--red-1) shadow-md-solid shadow-error forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText]",
 } as const satisfies Record<string, string>;
 
 type ToastVariant = keyof typeof VARIANT_CLASSES;
 
 const toastVariants = cva(
-  "data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-start justify-between gap-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full",
+  "data-[swipe=move]:transition-none group relative pointer-events-auto flex w-full items-start justify-between gap-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full data-[state=closed]:slide-out-to-right-full forced-color-adjust-none",
   {
     variants: {
       variant: VARIANT_CLASSES,
@@ -76,7 +77,8 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus-visible:group-[.destructive]:ring-destructive",
+      "forced-color-adjust-none forced-colors:border-[ButtonText] forced-colors:bg-[ButtonFace] forced-colors:text-[ButtonText] forced-colors:hover:bg-[Highlight] forced-colors:hover:text-[HighlightText] forced-colors:disabled:border-[GrayText] forced-colors:disabled:text-[GrayText]",
       className,
     )}
     {...props}
@@ -91,7 +93,8 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-500 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-500 focus-visible:group-[.destructive]:ring-red-400 focus-visible:group-[.destructive]:ring-offset-red-600",
+      "forced-colors:text-[CanvasText] forced-colors:hover:text-[CanvasText] forced-colors:group-[.destructive]:text-[CanvasText] forced-colors:hover:group-[.destructive]:text-[CanvasText]",
       className,
     )}
     toast-close=""

package/src/components/ui/toaster.tsx

@@ -84,8 +84,8 @@ const ToastItem = ({
           className="h-4 w-4"
           buttonClassName={cn(
             "absolute right-8 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity",
-            "hover:text-foreground focus:opacity-100 focus:outline-hidden group-hover:opacity-100",
-            "group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-500 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
+            "hover:text-foreground focus:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 group-hover:opacity-100",
+            "group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-500 focus-visible:group-[.destructive]:ring-red-400 focus-visible:group-[.destructive]:ring-offset-red-600",
           )}
           value={() =>
             descriptionRef.current?.innerText ??

package/src/css/globals.css

@@ -151,6 +151,34 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .marimo,
+  .marimo::before,
+  .marimo::after,
+  .marimo *,
+  .marimo *::before,
+  .marimo *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-delay: 0s !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    transition-delay: 0s !important;
+  }
+
+  .marimo .running-app-icon {
+    visibility: visible !important;
+    animation-name: none !important;
+  }
+}
+
+@media (forced-colors: active) {
+  .marimo :focus-visible {
+    outline: 2px solid Highlight !important;
+    outline-offset: 2px;
+  }
+}
+
 @layer base {
   * {
     @apply border-border;