@boyernick/standard-ui-react 0.1.0 → 0.1.1-canary.10

package/src/lib/motion.ts

@@ -1,23 +1,133 @@
 /**
  * Shared motion classes for StandardUI.
- * Prefer CSS `scale` on centered modals so `translate` centering stays intact.
- * Anchored popups use `transform-origin` from Base UI.
+ *
+ * Every value resolves to a token in `@boyernick/standard-ui-tokens` — the
+ * `--ease-*` ladder and the `--duration-*` scale. Nothing here hardcodes a
+ * curve or a millisecond count.
+ *
+ * The easing ladder is ordered by *onset* — how quickly a transition commits:
+ *
+ *   passive  ambient, system-initiated       (slowest onset)
+ *   enter    surfaces arriving
+ *   move     things travelling across a surface
+ *   snap     direct response to a pointer    (sharpest onset)
+ *
+ * Two kinds of token live here, and they behave differently:
+ *
+ *   Mount tokens  — backdrop, popupCenter, popupAnchor, accordionPanel,
+ *     checkIndicator.
+ *     These carry separate enter and exit behaviour. Base UI flags the exit
+ *     with `data-ending-style`, and the `data-ending-style:` variants below
+ *     re-declare duration and easing for that direction. Exits always run at
+ *     `--duration-exit`, so dismissing anything costs the same no matter how
+ *     long the entrance took.
+ *
+ *   State tokens — tabsIndicator, colors, transform, all.
+ *     These animate between states on a mounted element, so there is no enter
+ *     or exit to distinguish; they take a single curve.
+ *
+ * Fades are linear on purpose. Perceived brightness is already non-linear, so
+ * easing an opacity change makes it look like it sticks at the end.
  */
+
+const DURATION = {
+  xs: "duration-[var(--duration-xs)]",
+  sm: "duration-[var(--duration-sm)]",
+  md: "duration-[var(--duration-md)]",
+  lg: "duration-[var(--duration-lg)]",
+} as const
+
+/** Every exit runs at the same length — see `--duration-exit`. */
+const EXIT_DURATION = "data-ending-style:duration-[var(--duration-exit)]"
+
+const REDUCED = "motion-reduce:transition-none"
+
 export const motion = {
-  backdrop:
-    "transition-opacity duration-150 ease-out motion-reduce:transition-none data-starting-style:opacity-0 data-ending-style:opacity-0",
-  /** Centered dialog / alert — scale property, not transform */
-  popupCenter:
-    "transition-[scale,opacity] duration-150 ease-out motion-reduce:transition-none data-starting-style:scale-[0.96] data-starting-style:opacity-0 data-ending-style:scale-[0.96] data-ending-style:opacity-0",
-  /** Select, tooltip, menus — transform-origin from Base UI */
-  popupAnchor:
-    "origin-[var(--transform-origin)] transition-[transform,scale,opacity] duration-150 ease-out motion-reduce:transition-none data-starting-style:scale-[0.96] data-starting-style:opacity-0 data-ending-style:scale-[0.96] data-ending-style:opacity-0",
-  accordionPanel:
-    "transition-[height] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none data-starting-style:h-0 data-ending-style:h-0",
-  tabsIndicator:
-    "transition-[translate,width] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
-  colors: "transition-colors duration-150 ease-out motion-reduce:transition-none",
-  transform:
-    "transition-transform duration-150 ease-out motion-reduce:transition-none",
-  all: "transition-all duration-150 ease-out motion-reduce:transition-none",
+  /** Overlay scrims. Linear both ways — see the note on fades above. */
+  backdrop: [
+    "transition-opacity",
+    DURATION.sm,
+    "ease-linear",
+    REDUCED,
+    "data-starting-style:opacity-0",
+    "data-ending-style:opacity-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-linear",
+  ].join(" "),
+
+  /** Centred dialog / alert — animates `scale`, so translate centring holds. */
+  popupCenter: [
+    "transition-[scale,opacity]",
+    DURATION.md,
+    "ease-enter",
+    REDUCED,
+    "data-starting-style:scale-[0.96] data-starting-style:opacity-0",
+    "data-ending-style:scale-[0.96] data-ending-style:opacity-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-move",
+  ].join(" "),
+
+  /** Select, tooltip, menus — transform-origin comes from Base UI. */
+  popupAnchor: [
+    "origin-[var(--transform-origin)]",
+    "transition-[transform,scale,opacity]",
+    DURATION.sm,
+    "ease-enter",
+    REDUCED,
+    "data-starting-style:scale-[0.96] data-starting-style:opacity-0",
+    "data-ending-style:scale-[0.96] data-ending-style:opacity-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-move",
+  ].join(" "),
+
+  /** Height expand and collapse. */
+  accordionPanel: [
+    "transition-[height]",
+    DURATION.md,
+    "ease-move",
+    REDUCED,
+    "data-starting-style:h-0",
+    "data-ending-style:h-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-move",
+  ].join(" "),
+
+  /** Check and minus glyphs mounting inside a small control. Snaps, because
+   *  it answers a click directly, and scales from the centre so the mark
+   *  reads as landing in the box rather than fading onto it. */
+  checkIndicator: [
+    "transition-[scale,opacity]",
+    DURATION.sm,
+    "ease-snap",
+    REDUCED,
+    "data-starting-style:scale-50 data-starting-style:opacity-0",
+    "data-ending-style:scale-50 data-ending-style:opacity-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-move",
+  ].join(" "),
+
+  /** Sliding tab underline or pill — follows a pointer, so it snaps. */
+  tabsIndicator: [
+    "transition-[translate,width]",
+    DURATION.md,
+    "ease-snap",
+    REDUCED,
+  ].join(" "),
+
+  /** Hover and pressed colour changes. */
+  colors: ["transition-colors", DURATION.sm, "ease-enter", REDUCED].join(" "),
+
+  /** Icon rotates and simple transforms. */
+  transform: [
+    "transition-transform",
+    DURATION.sm,
+    "ease-move",
+    REDUCED,
+  ].join(" "),
+
+  /** Every property. Reach for a narrower token first. */
+  all: ["transition-all", DURATION.sm, "ease-enter", REDUCED].join(" "),
+
+  /** Long, ambient movement — progress fills, meters, background shifts. */
+  passive: ["transition-all", DURATION.lg, "ease-passive", REDUCED].join(" "),
 } as const

package/src/lib/popup.ts

@@ -0,0 +1,45 @@
+/**
+ * Shared surface classes for anchored popups — autocomplete, combobox, select,
+ * menu, context menu, and anything else that floats a panel next to a trigger.
+ *
+ * These live in one place because they have to agree. A popup that picks its
+ * own radius or hairline reads as a different component to the one beside it,
+ * and the drift is invisible until two of them sit on the same page.
+ *
+ * The radii are related, not independent. `item` is nested inside `inset`, so
+ * it follows the nested-radius rule:
+ *
+ *   inner = outer − padding      6px = 12px − 6px
+ *
+ * Change `surface`'s radius or `inset`'s padding and `item` has to move with
+ * it, or the corners stop being concentric. See `.cursor/rules/nested-radius`.
+ */
+
+/** Radius, hairline and elevation. Add `overflow-hidden` where items can reach
+ *  the corners; leave it off panels that nest their own popups.
+ *
+ *  No `border` here on purpose. Every shadow token composes
+ *  `--elevation-hairline`, so `shadow-lg` already draws the edge — and that
+ *  hairline flips colour with the theme (black on light, white on dark) and
+ *  thins to 0.5px on hi-dpi displays. A border on top stacks a second edge
+ *  just outside the first, which reads as one muddy line darker than either,
+ *  and none of that tracking comes with it. Leaving it off also keeps the
+ *  edge out of the box model, so `popupInset` is the whole inset. */
+export const popupSurface = "rounded-xl bg-surface shadow-lg outline-none"
+
+/** Padding around a list of items. Collapses when there is nothing to pad, so
+ *  a sibling empty state is not pushed off-centre by a list of zero items.
+ *
+ *  6px is the whole inset — `popupSurface` carries no border to add to it —
+ *  which is what keeps 12 − 6 = 6 landing exactly on `popupItem`'s radius. */
+export const popupInset = "p-1.5 empty:p-0"
+
+/** One selectable row. */
+export const popupItem =
+  "flex min-h-9 cursor-default items-center gap-2 rounded-sm px-3 py-2 text-sm text-fg-primary outline-none select-none"
+
+/** A group heading. Shares the item's left edge. */
+export const popupLabel = "px-3 py-1.5 text-xs text-fg-tertiary"
+
+/** Empty and status text. Shares the item's left edge. */
+export const popupMessage = "px-3 py-2 text-sm text-fg-tertiary"

package/src/markdown-editor.tsx

@@ -108,7 +108,7 @@ type Format = {
 }
 
 const formats: Format[] = [
-  { label: "Bold", marker: "**", className: "font-semibold" },
+  { label: "Bold", marker: "**", className: "font-medium" },
   { label: "Italic", marker: "*", className: "italic" },
   { label: "Code", marker: "`", className: "font-mono" },
 ]

package/src/menu.tsx

@@ -5,6 +5,7 @@ import type { ComponentProps } from "react"
 import { IconCheckmark1, IconChevronRightSmall } from "./icons"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
+import { popupInset, popupItem, popupLabel, popupSurface } from "./lib/popup"
 
 export type MenuProps = ComponentProps<typeof BaseMenu.Root>
 export type MenuTriggerProps = ComponentProps<typeof BaseMenu.Trigger>
@@ -34,7 +35,7 @@ export type MenuSubmenuTriggerProps = ComponentProps<
 export type MenuViewportProps = ComponentProps<typeof BaseMenu.Viewport>
 
 const menuItemClassName = cn(
-  "flex min-h-8 cursor-default items-center gap-2 rounded-xs px-2.5 py-1.5 text-sm text-fg-primary outline-none select-none",
+  popupItem,
   motion.colors,
   "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-background-tertiary",
 )
@@ -59,7 +60,7 @@ export const MenuBackdrop = ({ className, ...props }: MenuBackdropProps) => (
 )
 
 export const MenuPositioner = ({
-  sideOffset = 4,
+  sideOffset = 8,
   className,
   ...props
 }: MenuPositionerProps) => (
@@ -73,7 +74,9 @@ export const MenuPositioner = ({
 export const MenuPopup = ({ className, ...props }: MenuPopupProps) => (
   <BaseMenu.Popup
     className={cn(
-      "z-50 min-w-40 overflow-hidden rounded-md border border-border-primary bg-surface p-1 shadow-md outline-none",
+      "z-50 min-w-40 overflow-hidden",
+      popupSurface,
+      popupInset,
       motion.popupAnchor,
       className,
     )}
@@ -123,7 +126,7 @@ export const MenuGroupLabel = ({
   ...props
 }: MenuGroupLabelProps) => (
   <BaseMenu.GroupLabel
-    className={cn("px-2.5 py-1.5 text-xs text-fg-tertiary", className)}
+    className={cn(popupLabel, className)}
     {...props}
   />
 )

package/src/meter.tsx

@@ -53,7 +53,7 @@ export const MeterIndicator = ({
 }: MeterIndicatorProps) => (
   <BaseMeter.Indicator
     className={cn(
-      "h-full rounded-full bg-brand-primary transition-[width] duration-300 ease-out motion-reduce:transition-none",
+      "h-full rounded-full bg-brand-primary transition-[width] duration-[var(--duration-lg)] ease-enter motion-reduce:transition-none",
       className,
     )}
     {...props}

package/src/navigation-menu.tsx

@@ -5,6 +5,7 @@ import type { ComponentProps } from "react"
 import { IconChevronDownSmall } from "./icons"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
+import { popupSurface } from "./lib/popup"
 
 export type NavigationMenuProps = ComponentProps<typeof BaseNavigationMenu.Root>
 export type NavigationMenuListProps = ComponentProps<
@@ -101,7 +102,7 @@ export const NavigationMenuIcon = ({
 }: NavigationMenuIconProps) => (
   <BaseNavigationMenu.Icon
     className={cn(
-      "inline-flex text-fg-tertiary transition-transform duration-150 ease-out motion-reduce:transition-none data-popup-open:rotate-180",
+      "inline-flex text-fg-tertiary transition-transform duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none data-popup-open:rotate-180",
       className,
     )}
     {...props}
@@ -177,8 +178,9 @@ export const NavigationMenuPopup = ({
 }: NavigationMenuPopupProps) => (
   <BaseNavigationMenu.Popup
     className={cn(
-      "relative z-50 w-[var(--popup-width)] overflow-hidden rounded-xl border border-border-primary bg-surface shadow-md outline-none",
-      "h-[var(--popup-height)] transition-[width,height,opacity] duration-200 ease-out motion-reduce:transition-none",
+      "relative z-50 w-[var(--popup-width)] overflow-hidden",
+      popupSurface,
+      "h-[var(--popup-height)] transition-[width,height,opacity] duration-[var(--duration-md)] ease-enter motion-reduce:transition-none",
       "data-starting-style:opacity-0 data-ending-style:opacity-0",
       className,
     )}

package/src/popover.tsx

@@ -4,6 +4,7 @@ import { Popover as BasePopover } from "@base-ui/react/popover"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
+import { popupSurface } from "./lib/popup"
 
 export type PopoverProps = ComponentProps<typeof BasePopover.Root>
 export type PopoverTriggerProps = ComponentProps<typeof BasePopover.Trigger>
@@ -47,7 +48,8 @@ export const PopoverPositioner = ({
 export const PopoverPopup = ({ className, ...props }: PopoverPopupProps) => (
   <BasePopover.Popup
     className={cn(
-      "z-50 flex w-72 flex-col gap-1 rounded-xl border border-border-primary bg-surface p-4 shadow-md outline-none",
+      "z-50 flex w-72 flex-col gap-1 p-4",
+      popupSurface,
       motion.popupAnchor,
       className,
     )}

package/src/preview-card.tsx

@@ -4,6 +4,7 @@ import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
+import { popupSurface } from "./lib/popup"
 
 export type PreviewCardProps = ComponentProps<typeof BasePreviewCard.Root>
 export type PreviewCardTriggerProps = ComponentProps<
@@ -67,7 +68,8 @@ export const PreviewCardPopup = ({
 }: PreviewCardPopupProps) => (
   <BasePreviewCard.Popup
     className={cn(
-      "z-50 w-72 overflow-hidden rounded-xl border border-border-primary bg-surface p-4 shadow-md outline-none",
+      "z-50 w-72 overflow-hidden p-4",
+      popupSurface,
       motion.popupAnchor,
       className,
     )}

package/src/progress.tsx

@@ -52,7 +52,7 @@ export const ProgressIndicator = ({
 }: ProgressIndicatorProps) => (
   <BaseProgress.Indicator
     className={cn(
-      "h-full rounded-full bg-brand-primary transition-[width] duration-300 ease-out motion-reduce:transition-none",
+      "h-full rounded-full bg-brand-primary transition-[width] duration-[var(--duration-lg)] ease-enter motion-reduce:transition-none",
       className,
     )}
     {...props}

package/src/scroll-area.tsx

@@ -49,7 +49,7 @@ export const ScrollAreaScrollbar = ({
 }: ScrollAreaScrollbarProps) => (
   <BaseScrollArea.Scrollbar
     className={cn(
-      "flex touch-none p-0.5 opacity-100 transition-opacity duration-150 ease-out motion-reduce:transition-none data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2",
+      "flex touch-none p-0.5 opacity-100 transition-opacity duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none data-[orientation=horizontal]:h-2 data-[orientation=vertical]:w-2",
       className,
     )}
     {...props}

package/src/select.tsx

@@ -5,6 +5,7 @@ import type { ComponentProps } from "react"
 import { IconChevronDownSmall } from "./icons"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
+import { popupInset, popupItem, popupLabel, popupSurface } from "./lib/popup"
 
 export type SelectProps = ComponentProps<typeof BaseSelect.Root>
 export type SelectTriggerProps = ComponentProps<typeof BaseSelect.Trigger>
@@ -33,7 +34,7 @@ export const SelectTrigger = ({
     className={cn(
       "flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-border-secondary bg-surface px-3 text-sm text-fg-primary inset-shadow-outline-top outline-none",
       motion.all,
-      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-placeholder:text-fg-quaternary data-popup-open:border-border-secondary data-popup-open:bg-background-tertiary/60",
+      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-placeholder:text-fg-quaternary data-popup-open:border-border-secondary",
       className,
     )}
     {...props}
@@ -71,7 +72,7 @@ export const SelectPortal = (props: SelectPortalProps) => (
 
 export const SelectPositioner = ({
   alignItemWithTrigger = false,
-  sideOffset = 4,
+  sideOffset = 6,
   className,
   ...props
 }: SelectPositionerProps) => (
@@ -86,7 +87,8 @@ export const SelectPositioner = ({
 export const SelectPopup = ({ className, ...props }: SelectPopupProps) => (
   <BaseSelect.Popup
     className={cn(
-      "z-50 max-h-[min(24rem,var(--available-height))] w-[var(--anchor-width)] overflow-hidden rounded-md border border-border-primary bg-surface shadow-md outline-none",
+      "z-50 max-h-[min(24rem,var(--available-height))] w-[var(--anchor-width)] overflow-hidden",
+      popupSurface,
       motion.popupAnchor,
       className,
     )}
@@ -96,7 +98,7 @@ export const SelectPopup = ({ className, ...props }: SelectPopupProps) => (
 
 export const SelectList = ({ className, ...props }: SelectListProps) => (
   <BaseSelect.List
-    className={cn("max-h-[inherit] overflow-y-auto p-1 outline-none", className)}
+    className={cn("max-h-[inherit] overflow-y-auto outline-none", popupInset, className)}
     {...props}
   />
 )
@@ -104,7 +106,7 @@ export const SelectList = ({ className, ...props }: SelectListProps) => (
 export const SelectItem = ({ className, ...props }: SelectItemProps) => (
   <BaseSelect.Item
     className={cn(
-      "flex min-h-8 cursor-default items-center gap-2 rounded-xs px-2.5 py-1.5 text-sm text-fg-primary outline-none select-none",
+      popupItem,
       motion.colors,
       "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-background-tertiary data-selected:text-fg-primary",
       className,
@@ -145,7 +147,7 @@ export const SelectGroupLabel = ({
   ...props
 }: SelectGroupLabelProps) => (
   <BaseSelect.GroupLabel
-    className={cn("px-2.5 py-1.5 text-xs text-fg-tertiary", className)}
+    className={cn(popupLabel, className)}
     {...props}
   />
 )

package/src/slider.tsx

@@ -38,7 +38,7 @@ export const SliderIndicator = ({
 }: SliderIndicatorProps) => (
   <BaseSlider.Indicator
     className={cn(
-      "absolute h-full rounded-full bg-brand-primary transition-[width] duration-150 ease-out motion-reduce:transition-none",
+      "absolute h-full rounded-full bg-brand-primary transition-[width] duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none",
       className,
     )}
     {...props}

package/src/switch.tsx

@@ -9,11 +9,11 @@ export type SwitchProps = ComponentProps<typeof BaseSwitch.Root>
 export const Switch = ({ className, ...props }: SwitchProps) => (
   <BaseSwitch.Root
     className={cn(
-      "relative inline-flex h-6 w-10 shrink-0 items-center rounded-full bg-background-quaternary transition-colors duration-150 ease-out motion-reduce:transition-none outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-checked:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      "relative inline-flex h-6 w-10 shrink-0 items-center rounded-full bg-background-quaternary transition-colors duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-checked:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
       className,
     )}
     {...props}
   >
-    <BaseSwitch.Thumb className="pointer-events-none block size-5 translate-x-0.5 rounded-full bg-surface shadow-sm transition-transform duration-150 ease-out motion-reduce:transition-none data-checked:translate-x-[1.125rem]" />
+    <BaseSwitch.Thumb className="pointer-events-none block size-5 translate-x-0.5 rounded-full bg-surface shadow-sm transition-transform duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none data-checked:translate-x-[1.125rem]" />
   </BaseSwitch.Root>
 )

package/src/text-animate.tsx

@@ -45,7 +45,6 @@ export const TextAnimate = ({
 
   useEffect(() => {
     let cancelled = false
-    let frame = 0
     let timeoutId: ReturnType<typeof setTimeout> | undefined
 
     const start = () => {
@@ -114,7 +113,6 @@ export const TextAnimate = ({
     return () => {
       cancelled = true
       if (timeoutId) clearTimeout(timeoutId)
-      cancelAnimationFrame(frame)
     }
   }, [chars, delay, effect, replay, speed, text])
 
@@ -124,9 +122,9 @@ export const TextAnimate = ({
         className={cn(
           "inline-block text-fg-primary",
           effect === "fade" &&
-            "animate-[text-fade-in_0.6s_ease-out_both] motion-reduce:animate-none",
+            "animate-[text-fade-in_0.6s_var(--ease-enter)_both] motion-reduce:animate-none",
           effect === "blur" &&
-            "animate-[text-blur-in_0.7s_ease-out_both] motion-reduce:animate-none",
+            "animate-[text-blur-in_0.7s_var(--ease-enter)_both] motion-reduce:animate-none",
           className,
         )}
         style={{ animationDelay: `${delay}ms` }}

package/src/textarea.tsx

@@ -3,7 +3,7 @@ import type { TextareaHTMLAttributes } from "react"
 import { cn } from "./lib/cn"
 
 const textareaVariants = cva(
-  "flex min-h-20 w-full cursor-text resize-y rounded-md px-3 py-2 text-sm text-fg-primary transition-[color,box-shadow] duration-150 ease-out placeholder:text-fg-quaternary outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20 disabled:cursor-not-allowed disabled:opacity-50",
+  "flex min-h-20 w-full cursor-text resize-y rounded-md px-3 py-2 text-sm text-fg-primary transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter placeholder:text-fg-quaternary outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20 disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {

package/src/toast.tsx

@@ -41,7 +41,7 @@ export const ToastRoot = ({ className, ...props }: ToastRootProps) => (
     className={cn(
       "relative z-[calc(1000-var(--toast-index))] mb-2 box-border w-full rounded-xl border border-border-primary bg-surface p-4 shadow-lg outline-none",
       "h-[var(--toast-frontmost-height,var(--toast-height))]",
-      "transition-[transform,opacity] duration-200 ease-out motion-reduce:transition-none",
+      "transition-[transform,opacity] duration-[var(--duration-md)] ease-enter motion-reduce:transition-none",
       "data-starting-style:opacity-0 data-starting-style:translate-y-2",
       "data-ending-style:opacity-0 data-ending-style:translate-y-2",
       "data-expanded:h-[var(--toast-height)] data-expanded:translate-y-[var(--toast-offset-y)]",
@@ -56,7 +56,7 @@ export const ToastRoot = ({ className, ...props }: ToastRootProps) => (
 export const ToastContent = ({ className, ...props }: ToastContentProps) => (
   <BaseToast.Content
     className={cn(
-      "flex flex-col gap-1 overflow-hidden transition-opacity duration-150",
+      "flex flex-col gap-1 overflow-hidden transition-opacity duration-[var(--duration-sm)]",
       "data-behind:pointer-events-none data-behind:opacity-0 data-expanded:data-behind:opacity-100",
       className,
     )}