@tanishqkancharla/maui 0.0.59 → 0.0.61

package/dist/components/ActivityIndicator.d.ts

@@ -0,0 +1,13 @@
+export type ActivityIndicatorVariant = "primary" | "accent" | "muted";
+export type ActivityIndicatorProps = {
+    size?: string;
+    variant?: ActivityIndicatorVariant;
+    className?: string;
+    "aria-label"?: string;
+};
+/**
+ * iOS-style spinner: eight rounded spokes with a fading tail. The wheel
+ * rotates in discrete 45° steps, like UIActivityIndicatorView, so the bright
+ * spoke appears to hop clockwise.
+ */
+export declare function ActivityIndicator({ size, variant, className, "aria-label": ariaLabel, }: ActivityIndicatorProps): import("react").JSX.Element;

package/dist/components/ActivityIndicator.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { style, useStyles } from "purse-styles";
+import { colors } from "../tokens/colors";
+import { cls } from "../utils/cls";
+// Geometry is in a 24×24 viewBox. Spokes end this far from the center.
+const VIEWBOX_CENTER = 12;
+const SPOKE_OUTER_RADIUS = 9.5;
+const SPOKE_COUNT = 8;
+const SPOKE_LENGTH = 2.75;
+const SPOKE_WIDTH = 2.5;
+const MIN_SPOKE_OPACITY = 0.15;
+const ROTATION_MS = 800;
+const SPOKE_TOP = VIEWBOX_CENTER - SPOKE_OUTER_RADIUS;
+// The top spoke leads; spokes counterclockwise from it fade toward the tail.
+const spokes = Array.from({ length: SPOKE_COUNT }, (_, index) => {
+    const distanceBehindHead = (SPOKE_COUNT - index) % SPOKE_COUNT;
+    return {
+        angle: (index * 360) / SPOKE_COUNT,
+        opacity: 1 - (distanceBehindHead * (1 - MIN_SPOKE_OPACITY)) / (SPOKE_COUNT - 1),
+    };
+});
+/**
+ * iOS-style spinner: eight rounded spokes with a fading tail. The wheel
+ * rotates in discrete 45° steps, like UIActivityIndicatorView, so the bright
+ * spoke appears to hop clockwise.
+ */
+export function ActivityIndicator({ size = "1em", variant = "accent", className, "aria-label": ariaLabel = "Loading", }) {
+    const svgRef = useRef(null);
+    const rootClassName = useStyles(rootClass, variantStyles[variant]);
+    useEffect(() => {
+        const animation = svgRef.current?.animate([{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }], {
+            duration: ROTATION_MS,
+            iterations: Infinity,
+            easing: `steps(${SPOKE_COUNT})`,
+        });
+        return () => animation?.cancel();
+    }, []);
+    return (_jsx("span", { role: "status", "aria-label": ariaLabel, className: cls(rootClassName, className), style: { width: size, height: size }, children: _jsx("svg", { ref: svgRef, "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", width: "100%", height: "100%", children: spokes.map(({ angle, opacity }) => (_jsx("line", { x1: VIEWBOX_CENTER, y1: SPOKE_TOP, x2: VIEWBOX_CENTER, y2: SPOKE_TOP + SPOKE_LENGTH, stroke: "currentColor", strokeWidth: SPOKE_WIDTH, strokeLinecap: "round", opacity: opacity, transform: `rotate(${angle} ${VIEWBOX_CENTER} ${VIEWBOX_CENTER})` }, angle))) }) }));
+}
+const variantStyles = {
+    primary: style({
+        color: "currentColor",
+    }),
+    accent: style({
+        color: colors.accent[10],
+    }),
+    muted: style({
+        color: colors.gray[11],
+    }),
+};
+const rootClass = style({
+    display: "inline-flex",
+    verticalAlign: "-0.125em",
+    flexShrink: 0,
+});

package/dist/components/Button.js

@@ -30,7 +30,7 @@ const disabledQuiet = {
     backgroundColor: "transparent",
     boxShadow: "none",
 };
-const buttonBaseClass = style(text({ size: "xs", fontWeight: 400, color: "highContrast" }), focusRing("&:focus-visible", buttonShadow), spacing.padding({ x: 6, y: 4 }), radius.sm, {
+const buttonBaseClass = style(text({ size: "xs", fontWeight: 500, color: "highContrast" }), focusRing("&:focus-visible", buttonShadow), spacing.padding({ x: 6, y: 4 }), radius.sm, {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -65,7 +65,7 @@ const buttonTextClass = style({
     minWidth: 0,
     textBox: "trim-both cap alphabetic",
 });
-const smallButtonClass = style(text({ size: "2xs", fontWeight: 400, color: "highContrast" }), {
+const smallButtonClass = style(text({ size: "2xs", fontWeight: 500, color: "highContrast" }), {
     height: controlSize.smHeight,
     gap: spacing.value(1),
     paddingInline: spacing.value(4),
@@ -146,9 +146,9 @@ function onSolidText(color) {
 function fillShade(color, lightnessOffset, alpha = 1) {
     return `oklch(from ${color} calc(l - ${lightnessOffset}) c h / ${alpha})`;
 }
-/** Fill-tinted edge and lift; no neutral gray, so the shadow matches any fill. */
-function primaryButtonShadow(color) {
-    return `inset 0 1px #ffffff18, inset 0 0 1px .5px #fff2, 0 0 0 .5px ${fillShade(color, 0.1)}, 0 1px 2px ${fillShade(color, 0, 0.35)}, 0 3px 8px -3px ${fillShade(color, 0, 0.6)}`;
+/** Dark-only top highlight, a fill-tinted lift (half strength in dark mode), and an edge painted beneath the lift: the fill's alpha step 6 in light mode, a near-black tint of the fill in dark mode. */
+function primaryButtonShadow(color, lightEdge) {
+    return `inset 0 .5px light-dark(transparent, rgb(255 255 255 / 0.15)), 0 1px 2px light-dark(${fillShade(color, 0, 0.35)}, ${fillShade(color, 0, 0.18)}), 0 3px 8px -3px light-dark(${fillShade(color, 0, 0.6)}, ${fillShade(color, 0, 0.3)}), 0 0 0 .5px light-dark(${lightEdge}, oklch(from ${color} 0.18 calc(c * 0.5) h))`;
 }
 /**
  * Diagonal from a slightly darker, more saturated, warmer-rotated fill to the
@@ -159,8 +159,8 @@ function primaryButtonGradient(color) {
 }
 /** Hover lightens the top of the gradient instead of replacing the fill. */
 const primaryHoverSheen = `linear-gradient(to bottom, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0))`;
-const primaryClass = memoize((fill, textColor) => {
-    const primaryShadow = primaryButtonShadow(fill);
+const primaryClass = memoize((fill, textColor, lightEdge) => {
+    const primaryShadow = primaryButtonShadow(fill, lightEdge);
     const gradient = primaryButtonGradient(fill);
     return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
         color: textColor,
@@ -177,13 +177,14 @@ const coloredButtonClass = memoize((variant, color) => {
     if (isCssColor(color)) {
         const fill = opaqueColor(color);
         if (variant === "primary") {
-            return primaryClass(fill, onSolidText(fill));
+            // No alpha scale for a custom fill; approximate step A6 with the fill at 35%.
+            return primaryClass(fill, onSolidText(fill), fillShade(fill, 0, 0.35));
         }
         return quietClass(fill, darkerFill(fill), fill);
     }
     const scale = paletteFill(color);
     if (variant === "primary") {
-        return primaryClass(scale[9], darkTextOnSolid.has(color) ? scale[12] : "white");
+        return primaryClass(scale[9], darkTextOnSolid.has(color) ? scale[12] : "white", paletteAlpha(color)[6]);
     }
     return quietClass(scale[11], scale[12], paletteAlpha(color)[9]);
 });

package/dist/components/Dialog.js

@@ -3,7 +3,7 @@ import { useCallback, useState, } from "react";
 import { AnimatePresence, motion, useReducedMotion, } from "motion/react";
 import { Dialog as AriaDialog, Heading, Modal, ModalOverlay, } from "react-aria-components";
 import { style, useStyles } from "purse-styles";
-import { background } from "../tokens/background";
+import { colors } from "../tokens/colors";
 import { border } from "../tokens/borders";
 import { overlayMotion } from "../tokens/motion";
 import { radius } from "../tokens/radius";
@@ -43,7 +43,8 @@ const overlay = style({
     overflow: "auto",
     overscrollBehavior: "contain",
 });
-const modalBase = style(background.element, border([], "outline"), radius.lg, {
+const modalBase = style(border([], "outline"), radius.lg, {
+    backgroundColor: colors.gray[2],
     width: "min(440px, calc(100vw - 32px))",
     maxWidth: "100%",
     maxHeight: "calc(100dvh - 32px)",

package/dist/components/LoadingScreen.d.ts

@@ -4,7 +4,7 @@ export type LoadingScreenProps = {
 };
 /**
  * Full-size loading state. A `progressLabel` on the first render fades the
- * Thinking indicator and label in together. Without a label, the indicator
+ * activity indicator and label in together. Without a label, the indicator
  * waits 2s before fading in; a label that arrives later animates in and
  * shifts the indicator so the pair stays centered.
  */

package/dist/components/LoadingScreen.js

@@ -7,9 +7,9 @@ import { radius } from "../tokens/radius";
 import { spacing } from "../tokens/spacing";
 import { text } from "../tokens/text";
 import { cls } from "../utils/cls";
+import { ActivityIndicator } from "./ActivityIndicator";
 import { Crossfade } from "./Crossfade";
 import { Text } from "./Text";
-import { Thinking } from "./Thinking";
 const INDICATOR_DELAY_MS = 2000;
 function resolvedLabel(progressLabel) {
     const trimmed = progressLabel?.trim();
@@ -17,7 +17,7 @@ function resolvedLabel(progressLabel) {
 }
 /**
  * Full-size loading state. A `progressLabel` on the first render fades the
- * Thinking indicator and label in together. Without a label, the indicator
+ * activity indicator and label in together. Without a label, the indicator
  * waits 2s before fading in; a label that arrives later animates in and
  * shifts the indicator so the pair stays centered.
  */
@@ -53,7 +53,7 @@ export function LoadingScreen({ progressLabel, className, }) {
         }, INDICATOR_DELAY_MS);
         return () => window.clearTimeout(timeoutId);
     }, [hadLabelAtStart, label, showIndicator]);
-    return (_jsx("div", { className: cls(rootClassName, className), role: "status", "aria-live": "polite", "aria-busy": "true", children: _jsx(AnimatePresence, { children: showIndicator ? (_jsxs(motion.div, { className: stackClassName, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: transition, children: [_jsx(Thinking, { variant: "accent", size: "0.8em", "aria-label": label ?? "Loading" }), _jsx(AnimatePresence, { initial: false, children: showLabel && label ? (_jsx(motion.div, { className: labelSlotClassName, initial: reduceMotion
+    return (_jsx("div", { className: cls(rootClassName, className), role: "status", "aria-live": "polite", "aria-busy": "true", children: _jsx(AnimatePresence, { children: showIndicator ? (_jsxs(motion.div, { className: stackClassName, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: transition, children: [_jsx(ActivityIndicator, { size: "1.25em", "aria-label": label ?? "Loading" }), _jsx(AnimatePresence, { initial: false, children: showLabel && label ? (_jsx(motion.div, { className: labelSlotClassName, initial: reduceMotion
                                 ? { opacity: 0 }
                                 : { opacity: 0, height: 0 }, animate: reduceMotion
                                 ? { opacity: 1 }

package/dist/maui.d.ts

@@ -35,6 +35,7 @@ export { Overlay } from "./components/Overlay";
 export { Drawer, drawerStyles, type DrawerProps, type DrawerSide, } from "./components/Drawer";
 export { Table, TableHeader, TableHead, TableBody, TableFooter, TableRow, TableCell, TableCaption, tableStyles, type TableAlign, type TableProps, type TableHeaderProps, type TableHeadProps, type TableBodyProps, type TableFooterProps, type TableRowProps, type TableCellProps, } from "./components/Table";
 export { Prose, useProseSize, proseContainerStyle, proseMaxWidth } from "./components/Prose";
+export { ActivityIndicator, type ActivityIndicatorProps, type ActivityIndicatorVariant, } from "./components/ActivityIndicator";
 export { Thinking, type ThinkingProps, type ThinkingVariant, } from "./components/Thinking";
 export { Crossfade, type CrossfadeProps, type CrossfadeDirection, } from "./components/Crossfade";
 export { LoadingScreen, type LoadingScreenProps, } from "./components/LoadingScreen";

package/dist/maui.js

@@ -38,6 +38,7 @@ export { Overlay } from "./components/Overlay";
 export { Drawer, drawerStyles, } from "./components/Drawer";
 export { Table, TableHeader, TableHead, TableBody, TableFooter, TableRow, TableCell, TableCaption, tableStyles, } from "./components/Table";
 export { Prose, useProseSize, proseContainerStyle, proseMaxWidth } from "./components/Prose";
+export { ActivityIndicator, } from "./components/ActivityIndicator";
 export { Thinking, } from "./components/Thinking";
 export { Crossfade, } from "./components/Crossfade";
 export { LoadingScreen, } from "./components/LoadingScreen";

package/dist/tokens/background.js

@@ -11,7 +11,7 @@ const appSurface = defineVars({
 const elementSurface = defineVars({
     element: {
         default: "#ffffff",
-        [DARK_THEME]: colors.gray[2],
+        [DARK_THEME]: colors.gray[3],
     },
 });
 /** Shared interactive surface washes. */

package/dist/tokens/shadow.d.ts

@@ -1,7 +1,7 @@
 export declare const shadowVars: import("purse-styles").VariableGroup<{
     readonly control: {
-        readonly default: "inset 0 1px #fff8, inset 0 0 1px 1px #fff8, 0 .5px 1px #00000018, 0 0 0 .5px rgb(0 0 0 / 8%), 0 0 4px -1px #0001";
-        readonly ":root[data-theme=\"dark\"]": "inset 0 1px #ffffff08, 0 0 0 .5px rgb(255 255 255 / 8%), 0 1px .5px #00000018, 0 0 3px -1px #000a";
+        readonly default: `0 .5px 1px #00000018, 0 0 4px -1px #0001, 0 0 0 .5px ${string}`;
+        readonly ":root[data-theme=\"dark\"]": "inset 0 .5px rgb(255 255 255 / 0.09), 0 1px .5px #00000018, 0 0 3px -1px #0005, 0 0 0 .5px rgb(0 0 0 / 0.8)";
     };
     readonly subtle: `rgba(var(--${string}), 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, var(--${string})) 0px 1px 1px -0.5px, rgba(0, 0, 0, var(--${string})) 0px 3px 3px -1.5px`;
     readonly medium: `rgba(var(--${string}), 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, var(--${string})) 0px 1px 1px -0.5px, rgba(0, 0, 0, var(--${string})) 0px 3px 3px -1.5px, rgba(0, 0, 0, var(--${string})) 0px 6px 6px -3px`;

package/dist/tokens/shadow.js

@@ -1,5 +1,6 @@
 import { defineVars, style } from "purse-styles";
 import { DARK_THEME } from "../theme/dataTheme";
+import { colors } from "./colors";
 const shadowParams = defineVars({
     foregroundRgb: {
         default: "0, 0, 0",
@@ -14,8 +15,10 @@ const rgb = shadowParams.foregroundRgb;
 const blur = shadowParams.blurOpacity;
 export const shadowVars = defineVars({
     control: {
-        default: `inset 0 1px #fff8, inset 0 0 1px 1px #fff8, 0 .5px 1px #00000018, 0 0 0 .5px rgb(0 0 0 / 8%), 0 0 4px -1px #0001`,
-        [DARK_THEME]: `inset 0 1px #ffffff08, 0 0 0 .5px rgb(255 255 255 / 8%), 0 1px .5px #00000018, 0 0 3px -1px #000a`,
+        // 0.5px edge listed last, so it paints beneath the drop: light reads as a
+        // gray A6 border; dark is near-black so the control looks cut into the surface.
+        default: `0 .5px 1px #00000018, 0 0 4px -1px #0001, 0 0 0 .5px ${colors.grayAlpha[6]}`,
+        [DARK_THEME]: `inset 0 .5px rgb(255 255 255 / 0.09), 0 1px .5px #00000018, 0 0 3px -1px #0005, 0 0 0 .5px rgb(0 0 0 / 0.8)`,
     },
     subtle: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px`,
     medium: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px, rgba(0, 0, 0, ${blur}) 0px 6px 6px -3px`,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.59",
+	"version": "0.0.61",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",

package/skills/maui/SKILL.md

@@ -30,6 +30,7 @@ Use Maui components. When one can't do what you need, build from the matching `r
 | Prose            | [prose.md](references/components/prose.md) (`Prose`, `H1`–`H4`, `P`, lists, `Label`, `Link`) |
 | Editor / MarkdownEditor | [editor.md](references/components/editor.md) (optional TipTap peers; separate imports) |
 | Thinking         | [thinking.md](references/components/thinking.md)                                             |
+| Activity indicator | [activity-indicator.md](references/components/activity-indicator.md)                     |
 | Crossfade        | [crossfade.md](references/components/crossfade.md)                                           |
 | Loading screen   | [loading-screen.md](references/components/loading-screen.md)                                 |
 | Text             | [text.md](references/components/text.md)                                                     |

package/skills/maui/references/components/activity-indicator.md

@@ -0,0 +1,16 @@
+# Activity indicator
+
+Gallery: `/components/activity-indicator`. Import from `"maui"`.
+
+iOS-style spinner: eight spokes with a fading tail that rotate in 45° steps. `size` is a CSS length (default `1em`). `variant`: `"accent"` (default) | `"primary"` (currentColor) | `"muted"`. `aria-label` defaults to `"Loading"`.
+
+On an accent fill, such as a primary button, pass `variant="primary"` so the spinner takes the button text color.
+
+Use it for loading: fetching, saving, syncing, and other indeterminate waits. When waiting on LLM inference, use [Thinking](thinking.md) instead. The `Spinner` icon is a static glyph, not this component.
+
+```tsx
+<Button variant="primary">
+  <ActivityIndicator variant="primary" aria-label="Saving" />
+  Saving
+</Button>
+```

package/skills/maui/references/components/buttons.md

@@ -30,7 +30,7 @@ Styled React Aria `Button` (default `type="button"`). Consumes `ButtonContext`,
 | `onClick` | Still supported. React Aria also exposes `onPress` |
 | `children` | Text is wrapped for cap-height trim; SVG icons sit beside text. Icon-only needs `aria-label` |
 
-Primary: fill step 9, light text (`onAccent`, or step 12 on amber/lime/mint/sky/yellow). Custom CSS fill drops alpha; text is white or near-black from lightness. The fill is a diagonal gradient (`to top left`) from the fill shifted by OKLCH `l − 0.027`, `c × 1.05`, `h − 6.8` to the fill itself. The shadow keeps the white inset highlight and tints a 0.5px edge (`l − 0.1`) and a soft lift from the fill — no neutral gray. Hover layers a white-to-transparent sheen over the gradient; disabled drops the gradient. Quiet: no fill; `variantColor` tints the label/icon. Hover/press mix `grayAlpha[9]` (or that color’s alpha 9, or the hex) into transparent at 6% light / 9% dark; press is 2×. Hover fills snap.
+Primary: fill step 9, light text (`onAccent`, or step 12 on amber/lime/mint/sky/yellow). Custom CSS fill drops alpha; text is white or near-black from lightness. The fill is a diagonal gradient (`to top left`) from the fill shifted by OKLCH `l − 0.027`, `c × 1.05`, `h − 6.8` to the fill itself. In dark mode the shadow has a 0.5px white top highlight at 15% (`shadow.control` uses 9%); light mode has none. The shadow tints a soft lift from the fill, at half strength in dark mode, and adds a 0.5px edge painted beneath the lift: the fill color’s alpha step 6 in light mode (a custom CSS fill uses the fill at 35%); in dark mode a near-black tint of the fill (OKLCH lightness 0.18, half chroma) — no neutral gray. Hover layers a white-to-transparent sheen over the gradient; disabled drops the gradient. Quiet: no fill; `variantColor` tints the label/icon. Hover/press mix `grayAlpha[9]` (or that color’s alpha 9, or the hex) into transparent at 6% light / 9% dark; press is 2×. Hover fills snap.
 
 While a menu or overlay is open, the trigger keeps the active fill via RAC `data-pressed` / `aria-expanded` (same tokens as `:active`: `elementActive`, or primary step 10).
 

package/skills/maui/references/components/loading-screen.md

@@ -1,8 +1,8 @@
 # Loading screen
 
-Gallery: `/components/loading-screen`. Import from `"maui"`. Uses [Thinking](thinking.md) and [Crossfade](crossfade.md).
+Gallery: `/components/loading-screen`. Import from `"maui"`. Uses [Activity indicator](activity-indicator.md) and [Crossfade](crossfade.md).
 
-Fills available width and height (`flex: 1`, `width/height: 100%`). Centered `Thinking` (accent, `0.8em`), with `spacing.value(12)` (24px at the default scale) above the label.
+Fills available width and height (`flex: 1`, `width/height: 100%`). Centered `ActivityIndicator` (accent, `1.25em`), with `spacing.value(12)` (24px at the default scale) above the label.
 
 ```tsx
 <LoadingScreen />
@@ -11,7 +11,7 @@ Fills available width and height (`flex: 1`, `width/height: 100%`). Centered `Th
 
 | First paint | Later `progressLabel` |
 | --- | --- |
-| Label present | Thinking + label fade in together. Later labels Crossfade `up`. Label punctuation is preserved; nothing is appended |
-| No label | Thinking waits **2s**, then fades in. A label before 2s fades both in immediately. A label after 2s animates in and shifts Thinking so the pair stays centered |
+| Label present | Indicator + label fade in together. Later labels Crossfade `up`. Label punctuation is preserved; nothing is appended |
+| No label | The indicator waits **2s**, then fades in. A label before 2s fades both in immediately. A label after 2s animates in and shifts the indicator so the pair stays centered |
 
 `role="status"` `aria-busy` `aria-live="polite"`.

package/skills/maui/references/components/thinking.md

@@ -4,6 +4,8 @@ Gallery: `/components/thinking`. Import from `"maui"`.
 
 3×3 Game of Life, text-sized. `size` is a CSS length (default `1em`). `variant`: `"primary"` (currentColor) | `"accent"` | `"muted"`.
 
+Use Thinking only while waiting on LLM inference, such as a model drafting a reply or an agent working. For ordinary loading (fetching, saving, syncing), use [Activity indicator](activity-indicator.md).
+
 ```tsx
 <Flex row alignItems="center" gap={4}>
   <Thinking size="0.75em" variant="muted" />

package/skills/maui/references/tokens.md

@@ -178,7 +178,7 @@ shadowVars.control | .subtle | .medium | .strong // raw box-shadow strings
 tintedSubtle(color)                             // subtle ring+blur tinted from a fill
 ```
 
-`shadow.control` uses inset highlights and a compact outer edge. Every elevation
+`shadow.control` is a small drop over a 0.5px edge: gray A6 (`grayAlpha[6]`) in light mode, 80% black in dark mode so the control looks cut into the surface. Dark mode also adds a 0.5px top highlight. Every elevation
 already includes a 1px ring. **Do not also `border()` the same element.**
 
 `border(sides, color)`:

package/src/apps/JsxEditor/catalog.ts

@@ -42,6 +42,7 @@ import {
 import { Text } from "../../components/Text"
 import { TabBar } from "../../components/TabBar"
 import { Thinking } from "../../components/Thinking"
+import { ActivityIndicator } from "../../components/ActivityIndicator"
 import { Crossfade } from "../../components/Crossfade"
 import { LoadingScreen } from "../../components/LoadingScreen"
 import { Tooltip } from "../../components/Tooltip"
@@ -529,6 +530,16 @@ export const catalog: CatalogComponent[] = [
 			{ name: "className" },
 		],
 	},
+	{
+		name: "ActivityIndicator",
+		info: "iOS-style spinner. Eight spokes with a fading tail rotate in 45° steps. Accent by default.",
+		attributes: [
+			{ name: "size", info: "CSS length, default 1em" },
+			{ name: "variant", values: ["accent", "primary", "muted"] },
+			{ name: "aria-label", info: "Default Loading" },
+			{ name: "className" },
+		],
+	},
 	{
 		name: "Crossfade",
 		info: "When contentKey changes, fades previous children out and the next in. Omit direction for an in-place opacity fade. Pass up, down, left, or right to slide. contentKey is required.",
@@ -544,11 +555,11 @@ export const catalog: CatalogComponent[] = [
 	},
 	{
 		name: "LoadingScreen",
-		info: "Full-size loading state. Optional progressLabel is shown in accent, medium weight, with trailing .... Small accent Thinking. Delays 2s when no label at start; label changes Crossfade up.",
+		info: "Full-size loading state. Optional progressLabel is shown in accent, medium weight, with trailing .... Accent ActivityIndicator. Delays 2s when no label at start; label changes Crossfade up.",
 		attributes: [
 			{
 				name: "progressLabel",
-				info: "Optional status under the Thinking indicator",
+				info: "Optional status under the activity indicator",
 			},
 			{ name: "className" },
 		],
@@ -600,6 +611,7 @@ export const previewScope: Record<string, unknown> = {
 	Text,
 	TabBar,
 	Thinking,
+	ActivityIndicator,
 	Crossfade,
 	LoadingScreen,
 	Tooltip,

package/src/components/ActivityIndicator.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useRef } from "react"
+import { style, useStyles } from "purse-styles"
+import { colors } from "../tokens/colors"
+import { cls } from "../utils/cls"
+
+// Geometry is in a 24×24 viewBox. Spokes end this far from the center.
+const VIEWBOX_CENTER = 12
+const SPOKE_OUTER_RADIUS = 9.5
+const SPOKE_COUNT = 8
+const SPOKE_LENGTH = 2.75
+const SPOKE_WIDTH = 2.5
+const MIN_SPOKE_OPACITY = 0.15
+const ROTATION_MS = 800
+
+const SPOKE_TOP = VIEWBOX_CENTER - SPOKE_OUTER_RADIUS
+
+// The top spoke leads; spokes counterclockwise from it fade toward the tail.
+const spokes = Array.from({ length: SPOKE_COUNT }, (_, index) => {
+	const distanceBehindHead = (SPOKE_COUNT - index) % SPOKE_COUNT
+	return {
+		angle: (index * 360) / SPOKE_COUNT,
+		opacity:
+			1 - (distanceBehindHead * (1 - MIN_SPOKE_OPACITY)) / (SPOKE_COUNT - 1),
+	}
+})
+
+export type ActivityIndicatorVariant = "primary" | "accent" | "muted"
+
+export type ActivityIndicatorProps = {
+	size?: string
+	variant?: ActivityIndicatorVariant
+	className?: string
+	"aria-label"?: string
+}
+
+/**
+ * iOS-style spinner: eight rounded spokes with a fading tail. The wheel
+ * rotates in discrete 45° steps, like UIActivityIndicatorView, so the bright
+ * spoke appears to hop clockwise.
+ */
+export function ActivityIndicator({
+	size = "1em",
+	variant = "accent",
+	className,
+	"aria-label": ariaLabel = "Loading",
+}: ActivityIndicatorProps) {
+	const svgRef = useRef<SVGSVGElement>(null)
+	const rootClassName = useStyles(rootClass, variantStyles[variant])
+
+	useEffect(() => {
+		const animation = svgRef.current?.animate(
+			[{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
+			{
+				duration: ROTATION_MS,
+				iterations: Infinity,
+				easing: `steps(${SPOKE_COUNT})`,
+			},
+		)
+		return () => animation?.cancel()
+	}, [])
+
+	return (
+		<span
+			role="status"
+			aria-label={ariaLabel}
+			className={cls(rootClassName, className)}
+			style={{ width: size, height: size }}
+		>
+			<svg
+				ref={svgRef}
+				aria-hidden="true"
+				focusable="false"
+				viewBox="0 0 24 24"
+				width="100%"
+				height="100%"
+			>
+				{spokes.map(({ angle, opacity }) => (
+					<line
+						key={angle}
+						x1={VIEWBOX_CENTER}
+						y1={SPOKE_TOP}
+						x2={VIEWBOX_CENTER}
+						y2={SPOKE_TOP + SPOKE_LENGTH}
+						stroke="currentColor"
+						strokeWidth={SPOKE_WIDTH}
+						strokeLinecap="round"
+						opacity={opacity}
+						transform={`rotate(${angle} ${VIEWBOX_CENTER} ${VIEWBOX_CENTER})`}
+					/>
+				))}
+			</svg>
+		</span>
+	)
+}
+
+const variantStyles = {
+	primary: style({
+		color: "currentColor",
+	}),
+	accent: style({
+		color: colors.accent[10],
+	}),
+	muted: style({
+		color: colors.gray[11],
+	}),
+} as const
+
+const rootClass = style({
+	display: "inline-flex",
+	verticalAlign: "-0.125em",
+	flexShrink: 0,
+})

package/src/components/Button.tsx

@@ -44,7 +44,7 @@ const disabledQuiet = {
 } as const
 
 const buttonBaseClass = style(
-	text({ size: "xs", fontWeight: 400, color: "highContrast" }),
+	text({ size: "xs", fontWeight: 500, color: "highContrast" }),
 	focusRing("&:focus-visible", buttonShadow),
 	spacing.padding({ x: 6, y: 4 }),
 	radius.sm,
@@ -87,7 +87,7 @@ const buttonTextClass = style({
 })
 
 const smallButtonClass = style(
-	text({ size: "2xs", fontWeight: 400, color: "highContrast" }),
+	text({ size: "2xs", fontWeight: 500, color: "highContrast" }),
 	{
 		height: controlSize.smHeight,
 		gap: spacing.value(1),
@@ -193,9 +193,9 @@ function fillShade(color: string, lightnessOffset: number, alpha = 1) {
 	return `oklch(from ${color} calc(l - ${lightnessOffset}) c h / ${alpha})`
 }
 
-/** Fill-tinted edge and lift; no neutral gray, so the shadow matches any fill. */
-function primaryButtonShadow(color: string) {
-	return `inset 0 1px #ffffff18, inset 0 0 1px .5px #fff2, 0 0 0 .5px ${fillShade(color, 0.1)}, 0 1px 2px ${fillShade(color, 0, 0.35)}, 0 3px 8px -3px ${fillShade(color, 0, 0.6)}`
+/** Dark-only top highlight, a fill-tinted lift (half strength in dark mode), and an edge painted beneath the lift: the fill's alpha step 6 in light mode, a near-black tint of the fill in dark mode. */
+function primaryButtonShadow(color: string, lightEdge: string) {
+	return `inset 0 .5px light-dark(transparent, rgb(255 255 255 / 0.15)), 0 1px 2px light-dark(${fillShade(color, 0, 0.35)}, ${fillShade(color, 0, 0.18)}), 0 3px 8px -3px light-dark(${fillShade(color, 0, 0.6)}, ${fillShade(color, 0, 0.3)}), 0 0 0 .5px light-dark(${lightEdge}, oklch(from ${color} 0.18 calc(c * 0.5) h))`
 }
 
 /**
@@ -209,27 +209,30 @@ function primaryButtonGradient(color: string) {
 /** Hover lightens the top of the gradient instead of replacing the fill. */
 const primaryHoverSheen = `linear-gradient(to bottom, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0))`
 
-const primaryClass = memoize((fill: string, textColor: string) => {
-	const primaryShadow = primaryButtonShadow(fill)
-	const gradient = primaryButtonGradient(fill)
-	return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
-		color: textColor,
-		backgroundColor: fill,
-		backgroundImage: gradient,
-		boxShadow: primaryShadow,
-		"&:hover:not(:disabled)": {
-			backgroundImage: `${primaryHoverSheen}, ${gradient}`,
-		},
-		"&:disabled": disabledRaised,
-	})
-})
+const primaryClass = memoize(
+	(fill: string, textColor: string, lightEdge: string) => {
+		const primaryShadow = primaryButtonShadow(fill, lightEdge)
+		const gradient = primaryButtonGradient(fill)
+		return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
+			color: textColor,
+			backgroundColor: fill,
+			backgroundImage: gradient,
+			boxShadow: primaryShadow,
+			"&:hover:not(:disabled)": {
+				backgroundImage: `${primaryHoverSheen}, ${gradient}`,
+			},
+			"&:disabled": disabledRaised,
+		})
+	},
+)
 
 const coloredButtonClass = memoize(
 	(variant: "primary" | "quiet", color: ButtonVariantColor) => {
 		if (isCssColor(color)) {
 			const fill = opaqueColor(color)
 			if (variant === "primary") {
-				return primaryClass(fill, onSolidText(fill))
+				// No alpha scale for a custom fill; approximate step A6 with the fill at 35%.
+				return primaryClass(fill, onSolidText(fill), fillShade(fill, 0, 0.35))
 			}
 
 			return quietClass(fill, darkerFill(fill), fill)
@@ -240,6 +243,7 @@ const coloredButtonClass = memoize(
 			return primaryClass(
 				scale[9],
 				darkTextOnSolid.has(color) ? scale[12] : "white",
+				paletteAlpha(color)[6],
 			)
 		}
 

package/src/components/Dialog.tsx

@@ -17,7 +17,7 @@ import {
 	ModalOverlay,
 } from "react-aria-components"
 import { style, useStyles } from "purse-styles"
-import { background } from "../tokens/background"
+import { colors } from "../tokens/colors"
 import { border } from "../tokens/borders"
 import { overlayMotion } from "../tokens/motion"
 import { radius } from "../tokens/radius"
@@ -81,7 +81,8 @@ const overlay = style({
 	overscrollBehavior: "contain",
 })
 
-const modalBase = style(background.element, border([], "outline"), radius.lg, {
+const modalBase = style(border([], "outline"), radius.lg, {
+	backgroundColor: colors.gray[2],
 	width: "min(440px, calc(100vw - 32px))",
 	maxWidth: "100%",
 	maxHeight: "calc(100dvh - 32px)",

package/src/components/LoadingScreen.tsx

@@ -10,9 +10,9 @@ import { radius } from "../tokens/radius"
 import { spacing } from "../tokens/spacing"
 import { text } from "../tokens/text"
 import { cls } from "../utils/cls"
+import { ActivityIndicator } from "./ActivityIndicator"
 import { Crossfade } from "./Crossfade"
 import { Text } from "./Text"
-import { Thinking } from "./Thinking"
 
 const INDICATOR_DELAY_MS = 2000
 
@@ -28,7 +28,7 @@ function resolvedLabel(progressLabel: string | undefined) {
 
 /**
  * Full-size loading state. A `progressLabel` on the first render fades the
- * Thinking indicator and label in together. Without a label, the indicator
+ * activity indicator and label in together. Without a label, the indicator
  * waits 2s before fading in; a label that arrives later animates in and
  * shifts the indicator so the pair stays centered.
  */
@@ -87,9 +87,8 @@ export function LoadingScreen({
 						animate={{ opacity: 1 }}
 						transition={transition}
 					>
-						<Thinking
-							variant="accent"
-							size="0.8em"
+						<ActivityIndicator
+							size="1.25em"
 							aria-label={label ?? "Loading"}
 						/>
 						<AnimatePresence initial={false}>

package/src/maui.ts

@@ -139,6 +139,11 @@ export {
 	type TableCellProps,
 } from "./components/Table"
 export { Prose, useProseSize, proseContainerStyle, proseMaxWidth } from "./components/Prose"
+export {
+	ActivityIndicator,
+	type ActivityIndicatorProps,
+	type ActivityIndicatorVariant,
+} from "./components/ActivityIndicator"
 export {
 	Thinking,
 	type ThinkingProps,

package/src/pages/ActivityIndicatorPage.tsx

@@ -0,0 +1,81 @@
+import { style, useStyles } from "purse-styles"
+import { Panel } from "./Panel"
+import { ActivityIndicator } from "../components/ActivityIndicator"
+import { Button } from "../components/Button"
+import { Prose } from "../components/Prose"
+import { H2, H3, P } from "../components/Typography"
+import { flex } from "../tokens/layout"
+import { text } from "../tokens/text"
+
+export function ActivityIndicatorPage() {
+	const pageClassName = useStyles(pageClass)
+	const rowClassName = useStyles(rowClass)
+	const columnClassName = useStyles(columnClass)
+	const inlineExampleClassName = useStyles(inlineExampleClass)
+
+	return (
+		<Prose className={pageClassName}>
+			<H2>Activity indicator</H2>
+			<P>
+				An iOS-style spinner. Eight rounded spokes fade from the leading spoke
+				to the tail, and the wheel rotates in 45° steps so the bright spoke hops
+				clockwise. It is text-sized and accent-colored by default. Use it for
+				loading; use Thinking when waiting on LLM inference.
+			</P>
+
+			<H3>Variants</H3>
+			<Panel className={columnClassName}>
+				<p className={inlineExampleClassName}>
+					<ActivityIndicator variant="accent" aria-label="Loading, accent" />
+					Loading messages
+				</p>
+				<p className={inlineExampleClassName}>
+					<ActivityIndicator variant="primary" aria-label="Loading, primary" />
+					Syncing calendar
+				</p>
+				<p className={inlineExampleClassName}>
+					<ActivityIndicator variant="muted" aria-label="Loading, muted" />
+					Fetching attachments
+				</p>
+			</Panel>
+
+			<H3>Sizes</H3>
+			<Panel className={rowClassName}>
+				<ActivityIndicator size="1em" aria-label="Loading, small" />
+				<ActivityIndicator size="20px" aria-label="Loading, medium" />
+				<ActivityIndicator size="37px" aria-label="Loading, large" />
+			</Panel>
+
+			<H3>In a button</H3>
+			<Panel className={rowClassName}>
+				<Button variant="primary">
+					<ActivityIndicator variant="primary" aria-label="Saving" />
+					Saving
+				</Button>
+				<Button>
+					<ActivityIndicator aria-label="Refreshing" />
+					Refreshing
+				</Button>
+			</Panel>
+		</Prose>
+	)
+}
+
+const pageClass = style({
+	maxWidth: "1200px",
+	paddingBottom: "32px",
+})
+
+const rowClass = style(flex({ alignItems: "center", gap: 6 }))
+
+const columnClass = style(flex({ direction: "column", gap: 6 }))
+
+const inlineExampleClass = style(
+	text({ size: "md", fontWeight: 400, color: "highContrast" }),
+	{
+		display: "flex",
+		alignItems: "center",
+		gap: "6px",
+		margin: 0,
+	},
+)

package/src/pages/BackgroundColorTokenPage.tsx

@@ -62,11 +62,11 @@ export function BackgroundColorTokenPage() {
 							<Code>background.element</Code>
 						</TableCell>
 						<TableCell>
-							<Code>#ffffff</Code> / <Code>colors.gray[2]</Code>
+							<Code>#ffffff</Code> / <Code>colors.gray[3]</Code>
 						</TableCell>
 						<TableCell>
 							Inputs and slightly raised controls. Matches app white in
-							light; one step lighter than the canvas in dark.
+							light; two steps lighter than the canvas in dark.
 						</TableCell>
 					</TableRow>
 					<TableRow>

package/src/pages/ButtonsPage.tsx

@@ -86,8 +86,11 @@ export function ButtonsPage() {
 				<Code>variantColor</Code> (a palette name, default <Code>"accent"</Code>
 				). Pass a hex or <Code>rgb()</Code> string to use that color as the fill
 				(alpha is dropped). The fill is a subtle diagonal gradient from a
-				slightly darker, warmer shade of that color, and the edge and lift
-				shadows are tinted from it. Hover adds a white sheen at the top.
+				slightly darker, warmer shade of that color, and the lift shadow is
+				tinted from it; the lift is half as strong in dark mode. The 0.5px edge
+				is alpha step 6 of that color in light mode and a near-black tint of the
+				fill in dark mode. Dark mode adds a 0.5px white top highlight (15% on
+				primary, 9% on default buttons). Hover adds a white sheen at the top.
 			</P>
 			<Flex row alignItems="center" gap={4} style={{ flexWrap: "wrap" }}>
 				<Button variant="primary">Save</Button>

package/src/pages/LoadingScreenPage.tsx

@@ -98,7 +98,7 @@ export function LoadingScreenPage() {
 				Fills whatever width and height it is given, with{" "}
 				<Code>radius.lg</Code> on the surface. Pass{" "}
 				<Code>progressLabel</Code> to show a status under a small, accent
-				Thinking indicator. The label is accent, medium weight, and keeps the
+				activity indicator. The label is accent, medium weight, and keeps the
 				punctuation you provide. Label changes Crossfade up. With no label at
 				mount, the indicator waits 2s before fading in.
 			</P>
@@ -136,7 +136,7 @@ export function LoadingScreenPage() {
 
 			<H3>No label — wait 2 seconds</H3>
 			<P>
-				Mounts empty. After 2 seconds the Thinking indicator fades in,
+				Mounts empty. After 2 seconds the activity indicator fades in,
 				centered, with no label.
 			</P>
 			<Flex column gap={4}>

package/src/pages/Maui.tsx

@@ -1,6 +1,5 @@
 import type React from "react"
 import { Suspense, useEffect, useState } from "react"
-import { useFilter } from "react-aria"
 import {
 	Link as WouterLink,
 	Redirect,
@@ -13,6 +12,7 @@ import {
 import { defineVars, style, useStyles } from "purse-styles"
 import { Button } from "../components/Button"
 import { Drawer } from "../components/Drawer"
+import { FuzzyString } from "../components/FuzzyString"
 import { SearchField } from "../components/Input"
 import { Select, SelectItem } from "../components/Select"
 import { H3, Label } from "../components/Typography"
@@ -26,8 +26,10 @@ import { text } from "../tokens/text"
 import { type ThemePreference, useTheme } from "../theme/ThemeContext"
 import { isScalePreference, useScale } from "../theme/ScaleContext"
 import { LARGE_SCALE } from "../theme/dataScale"
+import { fuzzyMatch } from "../utils/fuzzyMatch"
 import { galleryCompactMedia } from "./galleryCompact"
 import { ReadmePage } from "./ReadmePage"
+import { ActivityIndicatorPage } from "./ActivityIndicatorPage"
 import { AvatarPage } from "./AvatarPage"
 import { BadgePage } from "./BadgePage"
 import { BackgroundColorTokenPage } from "./BackgroundColorTokenPage"
@@ -152,6 +154,11 @@ const navigation: NavEntry[] = [
 			},
 			{ label: "Editor", path: "/components/editor", page: EditorPage },
 			{ label: "Thinking", path: "/components/thinking", page: ThinkingPage },
+			{
+				label: "Activity indicator",
+				path: "/components/activity-indicator",
+				page: ActivityIndicatorPage,
+			},
 			{
 				label: "Crossfade",
 				path: "/components/crossfade",
@@ -363,19 +370,18 @@ function MauiNavigation() {
 	const emptyClassName = useStyles(navEmptyClass)
 	const { preference, setPreference } = useTheme()
 	const { preference: scale, setPreference: setScale } = useScale()
-	const { contains } = useFilter({ sensitivity: "base" })
 	const normalizedQuery = query.trim()
+	const matches = (label: string) =>
+		fuzzyMatch(normalizedQuery, label) !== undefined
 	const filteredNavigation = normalizedQuery
 		? navigation.flatMap<NavEntry>((entry) => {
 				if (!isNavGroup(entry)) {
-					return contains(entry.label, normalizedQuery) ? [entry] : []
+					return matches(entry.label) ? [entry] : []
 				}
 
-				const children = contains(entry.label, normalizedQuery)
+				const children = matches(entry.label)
 					? entry.children
-					: entry.children.filter((item) =>
-							contains(item.label, normalizedQuery),
-						)
+					: entry.children.filter((item) => matches(item.label))
 				return children.length > 0 ? [{ ...entry, children }] : []
 			})
 		: navigation
@@ -459,15 +465,21 @@ function MauiNavigation() {
 				{filteredNavigation.map((entry) =>
 					isNavGroup(entry) ? (
 						<li className={groupClassName} key={entry.label}>
-							<Label>{entry.label}</Label>
+							<Label>
+								<HighlightedLabel label={entry.label} query={normalizedQuery} />
+							</Label>
 							<ul className={childrenClassName}>
 								{entry.children.map((item) => (
-									<NavLink key={item.path} item={item} />
+									<NavLink
+										key={item.path}
+										item={item}
+										query={normalizedQuery}
+									/>
 								))}
 							</ul>
 						</li>
 					) : (
-						<NavLink key={entry.path} item={entry} />
+						<NavLink key={entry.path} item={entry} query={normalizedQuery} />
 					),
 				)}
 				{filteredNavigation.length === 0 ? (
@@ -480,7 +492,12 @@ function MauiNavigation() {
 	)
 }
 
-function NavLink(props: { item: NavItem }) {
+function HighlightedLabel(props: { label: string; query: string }) {
+	const match = props.query ? fuzzyMatch(props.query, props.label) : undefined
+	return match ? <FuzzyString match={match} /> : props.label
+}
+
+function NavLink(props: { item: NavItem; query: string }) {
 	const className = useStyles(navLinkClass)
 	const [selected] = useRoute(props.item.path)
 
@@ -491,7 +508,7 @@ function NavLink(props: { item: NavItem }) {
 				href={props.item.path}
 				aria-current={selected ? "page" : undefined}
 			>
-				{props.item.label}
+				<HighlightedLabel label={props.item.label} query={props.query} />
 			</WouterLink>
 		</li>
 	)

package/src/pages/ReadmePage.tsx

@@ -6,7 +6,7 @@ import { H2, H3, Li, Link, P, Ul } from "../components/Typography"
 export function ReadmePage() {
 	return (
 		<Prose style={{ marginBottom: "32px" }}>
-			<H2>Maui</H2>
+			<H2>README</H2>
 			<P>
 				Maui is an open-source, TypeScript-first design system styled with{" "}
 				<Link href="https://www.npmjs.com/package/purse-styles">

package/src/pages/ShadowTokenPage.tsx

@@ -27,7 +27,8 @@ export function ShadowTokenPage() {
 		<Prose style={{ marginBottom: "32px" }}>
 			<H2>Shadows</H2>
 			<P>
-				Controls use inset highlights with a compact outer edge. Other surfaces
+				Controls use a small drop over a 0.5px edge: gray A6 in light mode,
+				near-black in dark mode, plus a top highlight in dark mode. Other surfaces
 				use Craft&apos;s three-level elevation stack: a
 				foreground-colored 1px ring plus progressively deeper black blur layers.
 				Blur opacity is 0.06 in light mode and 0.12 in dark mode.

package/src/tokens/background.ts

@@ -13,7 +13,7 @@ const appSurface = defineVars({
 const elementSurface = defineVars({
 	element: {
 		default: "#ffffff",
-		[DARK_THEME]: colors.gray[2],
+		[DARK_THEME]: colors.gray[3],
 	},
 })
 

package/src/tokens/shadow.ts

@@ -1,5 +1,6 @@
 import { defineVars, style } from "purse-styles"
 import { DARK_THEME } from "../theme/dataTheme"
+import { colors } from "./colors"
 
 const shadowParams = defineVars({
 	foregroundRgb: {
@@ -17,8 +18,10 @@ const blur = shadowParams.blurOpacity
 
 export const shadowVars = defineVars({
 	control: {
-		default: `inset 0 1px #fff8, inset 0 0 1px 1px #fff8, 0 .5px 1px #00000018, 0 0 0 .5px rgb(0 0 0 / 8%), 0 0 4px -1px #0001`,
-		[DARK_THEME]: `inset 0 1px #ffffff08, 0 0 0 .5px rgb(255 255 255 / 8%), 0 1px .5px #00000018, 0 0 3px -1px #000a`,
+		// 0.5px edge listed last, so it paints beneath the drop: light reads as a
+		// gray A6 border; dark is near-black so the control looks cut into the surface.
+		default: `0 .5px 1px #00000018, 0 0 4px -1px #0001, 0 0 0 .5px ${colors.grayAlpha[6]}`,
+		[DARK_THEME]: `inset 0 .5px rgb(255 255 255 / 0.09), 0 1px .5px #00000018, 0 0 3px -1px #0005, 0 0 0 .5px rgb(0 0 0 / 0.8)`,
 	},
 	subtle: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px`,
 	medium: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px, rgba(0, 0, 0, ${blur}) 0px 6px 6px -3px`,