@boyernick/standard-ui-react 0.4.2-canary.54 → 0.4.2-canary.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.4.2-canary.54",
+  "version": "0.4.2-canary.56",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",

package/src/carousel.tsx

@@ -80,7 +80,8 @@ export type CarouselDotsProps = ComponentProps<"div">
 
 const carouselControlClassName = cn(
   "absolute z-20 !size-6 glass text-fg-primary [&_svg:not([class*='size-'])]:!size-3.5",
-  "hover:brightness-105 hover:text-fg-primary",
+  // The ghost button's page-grey hover fill would show through the lens.
+  "hover:bg-transparent hover:brightness-105 hover:text-fg-primary",
   "disabled:pointer-events-none disabled:opacity-0",
   motion.colors,
 )

package/src/modal.tsx

@@ -51,8 +51,10 @@ import {
 const TRACKPAD_LABEL =
   "Swipe, use the arrow keys, or use the controls to navigate"
 
+// Glass takes a glass hover: the lens brightens. The ghost button's own
+// hover fill is a page grey and is cleared, or it shows through the body.
 const modalControlClassName =
-  "glass glass-dark text-fg-scrim hover:text-fg-scrim outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-surface-scrim focus-visible:ring-ring/20"
+  "glass glass-dark hover:bg-transparent hover:brightness-150 text-fg-scrim hover:text-fg-scrim outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-surface-scrim focus-visible:ring-ring/20"
 
 export const modalContentVariants = cva(
   "h-dvh max-h-dvh w-screen max-w-none gap-0 overflow-hidden rounded-none border-0 bg-transparent p-0 shadow-none max-sm:max-w-none",

package/src/table.tsx

@@ -72,7 +72,9 @@ export const Table = ({
 }: TableProps) => (
   <div
     className={cn(
-      "w-full overflow-auto rounded-lg border border-border-primary bg-surface",
+      // rounded-2xl, the image frame's radius, so a table and an image on the
+      // same page share one corner.
+      "w-full overflow-auto rounded-2xl border border-border-primary bg-surface",
       containerClassName,
     )}
   >

package/src/video-player.tsx

@@ -43,10 +43,13 @@ const formatTime = (seconds: number) => {
  *  could lean on the bar for presence and sat at 28.
  *
  *  No hover background: the material *is* the background, and a translucent
- *  white wash over it fights the fill and the rim. Brightness lifts the whole
- *  object instead, the way a lit surface actually behaves. */
+ *  white wash over it fights the fill and the rim. The lens brightens instead,
+ *  by the same step as the image modal's glass controls.
+ *
+ *  No drop shadow on any glass here: the material draws its shape with the
+ *  rim, and `shadow-lg` would add its own hairline ring over it. */
 const overlayControl =
-  "glass glass-dark [--glass-alpha:52%] inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-white/85 outline-none transition-[filter,color,transform] duration-[var(--duration-sm)] ease-enter hover:text-white hover:brightness-110 active:scale-95 focus-visible:text-white focus-visible:ring-2 focus-visible:ring-white/50 motion-reduce:transition-none motion-reduce:active:scale-100"
+  "glass glass-dark [--glass-alpha:52%] inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-white/85 outline-none transition-[filter,color,transform] duration-[var(--duration-sm)] ease-enter hover:text-white hover:brightness-150 active:scale-95 focus-visible:text-white focus-visible:ring-2 focus-visible:ring-white/50 motion-reduce:transition-none motion-reduce:active:scale-100"
 
 /** The scrubber and its two timecodes travel together as one object. */
 const overlayTrack =
@@ -289,7 +292,11 @@ export const VideoPlayer = ({
       // `group` drives the chrome: it hides while playing and comes back on
       // hover or when anything inside takes focus.
       className={cn(
-        "group relative isolate overflow-hidden rounded-xl bg-black shadow-lg ring-1 ring-border-primary data-[fullscreen]:h-screen data-[fullscreen]:w-screen data-[fullscreen]:rounded-none data-[fullscreen]:ring-0 fullscreen:h-screen fullscreen:w-screen fullscreen:rounded-none fullscreen:ring-0",
+        // One edge: the 5% ring, with --shadow-300 alone for depth. shadow-lg
+        // carries its own hairline ring and doubled the frame. Black only in
+        // fullscreen, where letterboxing needs it: behind the rounded clip it
+        // bled through the video's anti-aliased corners as a dark stroke.
+        "group relative isolate overflow-hidden rounded-xl shadow-[var(--shadow-300)] ring-1 ring-border-primary data-[fullscreen]:h-screen data-[fullscreen]:w-screen data-[fullscreen]:rounded-none data-[fullscreen]:bg-black data-[fullscreen]:ring-0 fullscreen:h-screen fullscreen:w-screen fullscreen:rounded-none fullscreen:bg-black fullscreen:ring-0",
         className,
       )}
       aria-busy={loading || buffering || undefined}
@@ -311,7 +318,7 @@ export const VideoPlayer = ({
         {failed ? (
           <div
             role="alert"
-            className="mx-6 flex max-w-sm flex-col items-center gap-2 rounded-xl glass glass-dark px-5 py-4 text-center text-white shadow-lg"
+            className="mx-6 flex max-w-sm flex-col items-center gap-2 rounded-xl glass glass-dark px-5 py-4 text-center text-white"
           >
             <IconExclamationTriangle
               size={22}
@@ -327,7 +334,7 @@ export const VideoPlayer = ({
         ) : loading || buffering ? (
           <div
             role="status"
-            className="flex size-14 items-center justify-center rounded-full glass glass-dark text-white shadow-lg"
+            className="flex size-14 items-center justify-center rounded-full glass glass-dark text-white"
           >
             <span className="size-6 animate-spin rounded-full border-2 border-white/30 border-t-white motion-reduce:animate-none" />
             <span className="sr-only">
@@ -337,7 +344,7 @@ export const VideoPlayer = ({
         ) : !playing ? (
           <div
             className={cn(
-              "flex items-center justify-center rounded-full glass glass-dark text-white shadow-lg",
+              "flex items-center justify-center rounded-full glass glass-dark text-white",
               ended ? "h-8 gap-1 px-2.5" : "size-11",
             )}
           >