@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/src/toast/index.tsx

@@ -1,17 +1,42 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Toast.module.css
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Toast.tsx
+
+/**
+ * S2 Toast for @proyecto-viviana/ui.
+ *
+ * Based on these pinned React Spectrum S2 sources:
+ * - packages/@react-spectrum/s2/src/Toast.module.css
+ * - packages/@react-spectrum/s2/src/Toast.tsx
+ *
+ * This Solid module combines the pinned Toast component and transition stylesheet.
+ */
+
 import {
-  type JSX,
-  type Accessor,
-  batch,
   createContext,
   createEffect,
   createSignal,
+  flush,
   For,
   onCleanup,
-  onMount,
+  onSettled,
   Show,
-  splitProps,
   useContext,
+  createTrackedEffect,
 } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   FocusScope,
   createHover,
@@ -24,6 +49,7 @@ import {
   ToastRegion as HeadlessToastRegion,
   ToastProvider as HeadlessToastProvider,
   ToastContext,
+  UNSTABLE_ToastContent as HeadlessToastContent,
   ToastTitle as HeadlessToastTitle,
   ToastDescription as HeadlessToastDescription,
   globalToastQueue,
@@ -42,6 +68,7 @@ import {
   type ToastOptions as StatelyToastOptions,
 } from "@proyecto-viviana/solid-stately";
 import { ActionButton, Button } from "../button";
+import type { StaticColor } from "../button/types";
 import { CenterBaseline } from "../CenterBaseline";
 import { CloseButton } from "../dialog";
 import { AlertDiamondIcon } from "../icon/s2wf-icons/AlertDiamondIcon";
@@ -53,6 +80,7 @@ import { s2IntlStrings } from "../intl";
 import { createMediaQuery } from "../utils/createMediaQuery";
 import { useTheme } from "../provider";
 import { focusRing, lightDark, setColorScheme, style } from "../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type ToastPlacement = "top" | "top end" | "bottom" | "bottom end";
 export type ToastVariant = "positive" | "negative" | "notice" | "info" | "neutral";
@@ -61,7 +89,7 @@ type ToastEdge = "top" | "bottom";
 type ToastAlign = "center" | "end";
 
 // --- S2 Toast view transitions -------------------------------------------------
-// Ported from @react-spectrum/s2's Toast.module.css and the startViewTransition /
+// The transition rules match the pinned Toast.module.css and startViewTransition /
 // global reduce-motion machinery in Toast.tsx. Upstream ships these rules as a CSS
 // module that the bundler injects; the `::view-transition-group()` pseudo-elements,
 // `html.toast-*` global selectors and `@keyframes` cannot be expressed by the atomic
@@ -290,7 +318,13 @@ function startViewTransition(fn: () => void, type: string): void {
       doc.documentElement.classList.add("reduceMotion");
     }
 
-    const viewTransition = doc.startViewTransition(() => batch(fn));
+    // Mirrors upstream S2's `document.startViewTransition(() => flushSync(fn))`
+    // (@react-spectrum/s2 1.7.0, dist/private/Toast.mjs:69). `flush(fn)` is
+    // Solid 2's flushSync: it runs the mutation and drains the queue before the
+    // callback returns, which is when the browser snapshots. This was ported as
+    // `() => fn`, which returns the mutation instead of running it, so nothing
+    // rendered in any real browser (#578).
+    const viewTransition = doc.startViewTransition(() => flush(fn));
     void viewTransition.ready.catch(() => {});
     void viewTransition.finished.finally(() => {
       doc.documentElement.classList.remove(type, "reduceMotion");
@@ -429,7 +463,10 @@ const toastRegion = style<{
   },
   boxSizing: "border-box",
   maxHeight: "full",
-  borderRadius: "panel",
+  /* The float corner, 8px. `panel` is 14 — the biggest corner in the ladder, on the
+   * smallest surface in the register; a toast is a tier-2 float like the popover and
+   * the menu, not a panel. */
+  borderRadius: "default",
 });
 
 const toastList = style<{ placement: ToastEdge; isExpanded?: boolean }>({
@@ -491,22 +528,50 @@ const toastStyle = style<{ variant: ToastVariant; isExpanded?: boolean }>({
   boxSizing: "border-box",
   flexShrink: 0,
   font: "ui",
-  color: "white",
+  /* Every fill but `notice` and `info` is dark enough to carry white ink. The notice fill
+   * is the register's yellow, whose ramp is bright in BOTH columns (glasselated-ramps.ts):
+   * white on it is 2.3-2.5:1, so this channel — and the static controls hung on it below —
+   * flips to black, the same ink InlineAlert's boldFill and Badge already spend there.
+   * `info` is now the CTA fuchsia (below) and takes the ink that channel already owns:
+   * `create-ink` flips with the ground — white on the daylight fill (4.74:1), near-black
+   * #1a0512 on the night fill (6.66:1), where white would be 2.9:1. */
+  color: {
+    default: "white",
+    variant: {
+      info: "create-ink",
+      notice: "black",
+    },
+  },
+  /* Mirrors `backgroundColor` below. Needed so the static controls hung on the toast
+   * (`staticColor="auto"` on the action button and the close button) can compute their
+   * own ink and overlay fills against the toast's actual fill instead of assuming white
+   * — see `autoStaticColor` / `generateOverlayColorScale` in style/tokens.ts. */
+  "--s2-container-bg": {
+    type: "backgroundColor",
+    value: {
+      variant: {
+        neutral: "neutral-subdued",
+        info: "cta",
+        positive: "positive",
+        negative: "negative",
+        notice: lightDark("notice-900", "notice-700"),
+      },
+    },
+  },
   backgroundColor: {
     variant: {
       neutral: "neutral-subdued",
-      info: "informative",
+      /* THE ASK is fuchsia in this register, and an informational toast is the ask
+       * arriving: "someone replied", "your review is ready". `informative` was the blue
+       * accent, which the register spends on STRUCTURE — rails, tabs, selected rows — so
+       * a blue toast read as another piece of chrome rather than as something addressed
+       * to the reader. Same `cta` token as the +Create button and the LIVE badge. */
+      info: "cta",
       positive: "positive",
       negative: "negative",
-      /* The warning channel. A Toast paints a flat white ink over its fill and
-       * hangs white staticColor controls (close/action/expand) on top, so the
-       * fill has to carry white ink — which the bare `notice` token can't: it
-       * resolves to the light peach (notice-600 light) InlineAlert's boldFill
-       * pairs with BLACK ink. Rather than fork the whole white-ink model to
-       * black, this uses the SAME dark-amber fill Button's `warning` variant
-       * uses — lightDark("notice-900","notice-700"), both stops ≥4.7:1 white —
-       * so warning reads as the same orange across the button and the toast and
-       * every existing control stays legible untouched. */
+      /* The warning channel, on the SAME fill stops Button's `warning` variant uses —
+       * lightDark("notice-900","notice-700") — so warning reads as one yellow across the
+       * button and the toast. Both stops clear 7.7:1 against the black ink above. */
       notice: lightDark("notice-900", "notice-700"),
     },
   },
@@ -514,8 +579,12 @@ const toastStyle = style<{ variant: ToastVariant; isExpanded?: boolean }>({
     type: "fill",
     value: "currentColor",
   },
+  /* The float elevation: `--shadow-float` (the handoff's `sh2`) plus the `--edge-glass`
+   * rim — literally the pair the handoff puts on its own toast. `elevated` is Spectrum's
+   * cast drop-shadow, the elevation vocabulary this register replaced. Stacked toasts
+   * drop it, as before, so the stack reads as one slab. */
   boxShadow: {
-    default: "elevated",
+    default: "[var(--shadow-float), var(--edge-glass)]",
     isExpanded: "none",
   },
   willChange: "transform",
@@ -745,7 +814,9 @@ export function ToastRegion(props: ToastRegionProps): JSX.Element {
     }
     toggleExpanded(visibleToasts);
   };
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     if (!isExpanded() || !containerContext) {
       return;
     }
@@ -766,7 +837,13 @@ export function ToastRegion(props: ToastRegionProps): JSX.Element {
     };
 
     ownerDocument.addEventListener("keydown", handleDocumentKeyDown, true);
-    onCleanup(() => ownerDocument.removeEventListener("keydown", handleDocumentKeyDown, true));
+    _s2Cleanups.push(() =>
+      ownerDocument.removeEventListener("keydown", handleDocumentKeyDown, true),
+    );
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
   return (
@@ -860,18 +937,24 @@ export function ToastContainer(props: ToastContainerProps): JSX.Element {
   const [local, regionProps] = splitProps(props, ["PRIVATE_forceReducedMotion"]);
   const [isExpanded, setIsExpanded] = createSignal(false);
 
-  onMount(ensureToastAnimationStyles);
+  onSettled(ensureToastAnimationStyles);
 
   // Track prefers-reduced-motion and mirror it into the module-global flag that
   // startViewTransition reads, restoring the previous value on cleanup.
   const prefersReducedMotion = createMediaQuery("(prefers-reduced-motion)");
   const reduceMotion = () => local.PRIVATE_forceReducedMotion ?? prefersReducedMotion();
-  createEffect(() => {
+  createTrackedEffect(() => {
+    const _s2Cleanups: Array<() => void> = [];
+
     const previous = globalReduceMotion;
     globalReduceMotion = reduceMotion();
-    onCleanup(() => {
+    _s2Cleanups.push(() => {
       globalReduceMotion = previous;
     });
+
+    return () => {
+      for (const c of _s2Cleanups) c();
+    };
   });
 
   const unsubscribe = globalToastQueue.subscribe((toasts) => {
@@ -900,11 +983,11 @@ export function ToastContainer(props: ToastContainerProps): JSX.Element {
   };
 
   return (
-    <ToastContainerContext.Provider value={context}>
+    <ToastContainerContext value={context}>
       <ToastProvider useGlobalQueue>
         <ToastRegion {...regionProps} />
       </ToastProvider>
-    </ToastContainerContext.Provider>
+    </ToastContainerContext>
   );
 }
 
@@ -927,6 +1010,15 @@ export function Toast(props: ToastProps): JSX.Element {
   const content = () => local.toast.content;
   const contentDomProps = () => filterDOMProps(content() as Record<string, unknown>);
   const variant = () => normalizeVariant(content().variant, content().type);
+  /* The ink the static controls hung on the toast must spend. Three fills, three
+   * answers: the yellow `notice` fill takes black, the fuchsia `info` fill takes
+   * whichever of the two the ground calls for — `auto` resolves it from the
+   * `--s2-container-bg` the toast sets, matching the `create-ink` flip on the label —
+   * and every remaining fill is dark enough for white in both schemes. Hardcoding
+   * "white" here was what put white-on-fuchsia (2.9:1 in the dark scheme) on the close
+   * and action buttons the moment the info channel moved to the CTA colour. */
+  const staticInk = (): StaticColor =>
+    variant() === "notice" ? "black" : variant() === "info" ? "auto" : "white";
   const title = () => content().children ?? content().title;
   const actionLabel = () => content().actionLabel ?? content().action?.label;
   const actionHandler = () => content().onAction ?? content().action?.onAction;
@@ -1010,9 +1102,8 @@ export function Toast(props: ToastProps): JSX.Element {
           }
         >
           <div role="presentation" class={toastBody({ isSingle: shouldRenderAsSingle() })}>
-            <div
+            <HeadlessToastContent
               class={useComponentTransition() ? `${toastContent} toast-content` : toastContent}
-              data-solidaria-toast-content=""
             >
               <Show when={getVariantIcon(variant())}>
                 {(icon) => <CenterBaseline>{icon()}</CenterBaseline>}
@@ -1027,11 +1118,11 @@ export function Toast(props: ToastProps): JSX.Element {
                   </HeadlessToastDescription>
                 </Show>
               </div>
-            </div>
+            </HeadlessToastContent>
             <Show when={local.canExpand && !isExpanded() && visibleToasts().length > 1}>
               <ActionButton
                 isQuiet
-                staticColor="white"
+                staticColor={staticInk()}
                 styles={toastExpand}
                 UNSAFE_className={useComponentTransition() ? "toast-expand" : undefined}
                 onPress={local.onToggleExpanded}
@@ -1049,7 +1140,7 @@ export function Toast(props: ToastProps): JSX.Element {
               <Button
                 variant="secondary"
                 fillStyle="outline"
-                staticColor="white"
+                staticColor={staticInk()}
                 styles={toastAction}
                 UNSAFE_className={useComponentTransition() ? "toast-action" : undefined}
                 onPress={handleAction}
@@ -1060,7 +1151,7 @@ export function Toast(props: ToastProps): JSX.Element {
           </div>
 
           <CloseButton
-            staticColor="white"
+            staticColor={staticInk()}
             onPress={handleCloseToast}
             UNSAFE_className={useComponentTransition() ? "toast-close" : undefined}
             aria-label={stringFormatter().format("dialog.dismiss")}

package/src/togglebuttongroup/index.tsx

@@ -1,10 +1,26 @@
-import { type JSX, mergeProps, splitProps } from "solid-js";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx
+
+// Port of packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx.
+import type { JSX } from "@solidjs/web";
+import { mergeProps } from "@proyecto-viviana/solidaria/utils";
 import {
   ToggleButtonGroup as HeadlessToggleButtonGroup,
   type ToggleButtonGroupProps as HeadlessToggleButtonGroupProps,
 } from "@proyecto-viviana/solidaria-components";
 import type { StyleString } from "../style";
-import { useProviderProps } from "../provider";
+import { useProviderProps, type ProviderInheritedProps } from "../provider";
 import {
   type ActionButtonDensity,
   type ActionButtonOrientation,
@@ -21,6 +37,7 @@ import {
   type RefLike,
 } from "../button/spectrum-context";
 import type { StaticColor } from "../button/types";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export interface ToggleButtonGroupProps extends Omit<
   HeadlessToggleButtonGroupProps,
@@ -54,15 +71,23 @@ export interface ToggleButtonGroupProps extends Omit<
  * A ToggleButtonGroup is a grouping of related ToggleButtons with single or multiple selection.
  */
 export function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element {
-  const providerProps = useProviderProps(props);
+  const providerProps = useProviderProps(props) as ToggleButtonGroupProps & ProviderInheritedProps;
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(useToggleButtonGroupContext(), props.slot);
   const defaultProps: Partial<ToggleButtonGroupProps> = {
     density: "regular",
     size: "M",
     orientation: "horizontal",
   };
-  const providedContextProps = mergeProps(providerProps, contextProps ?? {}, props);
-  const merged = mergeProps(defaultProps, providerProps, contextProps ?? {}, props);
+  const providedContextProps = mergeProps<ToggleButtonGroupProps>(flags, contextProps ?? {}, props);
+  const merged = mergeProps<ToggleButtonGroupProps>(defaultProps, flags, contextProps ?? {}, props);
   const [local, headlessProps] = splitProps(merged, [
     "children",
     "size",
@@ -159,9 +184,7 @@ export function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element {
       data-disabled={local.isDisabled || undefined}
     >
       {() => (
-        <ToggleButtonGroupContext.Provider value={contextValue}>
-          {local.children}
-        </ToggleButtonGroupContext.Provider>
+        <ToggleButtonGroupContext value={contextValue}>{local.children}</ToggleButtonGroupContext>
       )}
     </HeadlessToggleButtonGroup>
   );

package/src/toolbar/index.tsx

@@ -1,10 +1,27 @@
-import { type JSX, splitProps } from "solid-js";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Toolbar.tsx
+
+// Port of packages/@react-spectrum/s2/src/Toolbar.tsx.
+
+import type { JSX } from "@solidjs/web";
 import {
   Toolbar as HeadlessToolbar,
   type ToolbarProps as HeadlessToolbarProps,
   type ToolbarRenderProps,
 } from "@proyecto-viviana/solidaria-components";
 import { style } from "../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type { ToolbarRenderProps };
 export type ToolbarProps = HeadlessToolbarProps;
@@ -14,11 +31,29 @@ export type ToolbarProps = HeadlessToolbarProps;
 // controls stack with no rhythm. Layout only — flex along the toolbar axis
 // with a consistent gap; the controls keep their own paint. `alignSelf: start`
 // stops column-flex parents from stretching the row full-width.
+// Glasselated: the toolbar is the register's COMMAND STRIP — the same matte
+// treatment as terminal Tabs and the ActionBar: an opaque well under the
+// register's dither, hairline `--well-border`, control rim, 4px inset with 4px
+// between controls. The strip is what makes a run of ActionButtons read as one
+// instrument rather than as loose buttons.
 const toolbarStyles = style<{ orientation: "horizontal" | "vertical" }>({
   display: "flex",
   alignSelf: "start",
   justifySelf: "start",
-  gap: 8,
+  gap: "[4px]",
+  backgroundColor: "well",
+  backgroundImage: {
+    default: "[repeating-conic-gradient(var(--well-scan) 0% 25%, transparent 0% 50%)]",
+    forcedColors: "none",
+  },
+  backgroundSize: "[var(--dither-tile) var(--dither-tile)]",
+  borderWidth: 1,
+  borderStyle: "solid",
+  borderColor: "well-border",
+  borderRadius: "default",
+  boxShadow: "edge-glass",
+  padding: "[4px]",
+  boxSizing: "border-box",
   flexDirection: {
     orientation: {
       horizontal: "row",
@@ -51,7 +86,10 @@ export function Toolbar(props: ToolbarProps): JSX.Element {
 
   const mergedClass = (rp: ToolbarRenderProps): string => {
     const cls = local.class;
-    return [toolbarStyles({ orientation: rp.orientation }), typeof cls === "function" ? cls(rp) : cls]
+    return [
+      toolbarStyles({ orientation: rp.orientation }),
+      typeof cls === "function" ? cls(rp) : cls,
+    ]
       .filter(Boolean)
       .join(" ");
   };

package/src/tooltip/index.tsx

@@ -1,4 +1,21 @@
-import { type JSX, Show, splitProps } from "solid-js";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Tooltip.tsx
+
+// Port of packages/@react-spectrum/s2/src/Tooltip.tsx.
+
+import { Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   Tooltip as HeadlessTooltip,
   TooltipTrigger as HeadlessTooltipTrigger,
@@ -12,6 +29,7 @@ import type { StyleString } from "../style";
 import { centerPadding, setColorScheme, style } from "../style" with { type: "macro" };
 import { mergeStyles } from "../style/runtime";
 import { useTheme, type ColorScheme } from "../provider";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type { TooltipPlacement };
 export type TooltipVariant = "default" | "neutral" | "info";
@@ -49,22 +67,50 @@ const tooltip = style<TooltipRenderProps & { colorScheme: ColorScheme | null }>(
   boxSizing: "border-box",
   font: "ui-sm",
   color: {
-    default: "gray-25",
+    /* The float tier's ink. `gray-25` was the near-white that paired with the opaque
+     * `neutral` fill below; over a translucent LIGHT-scheme float it is near-white on
+     * near-white. `gray-800` is the stop the register pins to its primary ink and the
+     * one `heading`/`title` already resolve to (style/spectrum-theme.ts), so it flips
+     * with the scheme the way the surface under it does. */
+    default: "gray-800",
     forcedColors: "ButtonText",
   },
   borderWidth: {
+    default: 1,
     forcedColors: 1,
   },
   borderStyle: {
+    default: "solid",
     forcedColors: "solid",
   },
   borderColor: {
+    default: "[var(--track)]",
     forcedColors: "transparent",
   },
-  backgroundColor: "neutral",
-  // Glasselated: a tooltip is a small opaque label, closer to a control than to a
-  // panel — the handoff draws no tooltip, so it takes the control corner and stays
-  // unblurred, since frosting a 200ms transient just makes it harder to read.
+  /* Terminal Glass tier 2. A tooltip is the smallest float, but it is a float: it lands
+   * over a panel, a card or a control, and it is the same family as the popover and the
+   * menu that can open from the same trigger. It was the one overlay left opaque
+   * (`neutral`, a solid dark ramp stop), which read as a Spectrum tooltip parked on a
+   * Terminal Glass page — and in the light scheme it was a black chip.
+   *
+   * Kept behind `--s2-container-bg` so `arrowStyles` below can paint the arrow with the
+   * same fill; without the custom property the arrow would need its own copy of the
+   * token and would drift from the body the first time the surface moved. */
+  "--s2-container-bg": {
+    type: "backgroundColor",
+    value: {
+      default: "float",
+      forcedColors: "Background",
+    },
+  },
+  backgroundColor: "--s2-container-bg",
+  backdropFilter: "var(--blur-clear)",
+  /* Float elevation: `--shadow-float` plus the `--edge-glass` rim, the pair the handoff
+   * puts on every tier-2 overlay. A tooltip needs it more than the others do — it is the
+   * smallest surface and the one most often shown over dense content. */
+  boxShadow: "[var(--shadow-float), var(--edge-glass)]",
+  // The register's control corner: a tooltip is label-sized, so it keeps the 5px
+  // button corner rather than the 8px the larger floats take.
   borderRadius: "control",
   fontFamily: "code",
   paddingX: "edge-to-text",
@@ -109,7 +155,9 @@ const tooltip = style<TooltipRenderProps & { colorScheme: ColorScheme | null }>(
 
 const arrowStyles = style<TooltipRenderProps>({
   display: "block",
-  fill: "gray-800",
+  /* Same fill as the body — `gray-800` was the opaque neutral's near-match and left a
+   * solid dark spike hanging off a translucent tooltip. */
+  fill: "--s2-container-bg",
   width: 10,
   height: 5,
   rotate: {