@boyernick/standard-ui-react 0.3.0 → 0.3.1-canary.43

package/package.json

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

package/src/carousel.tsx

@@ -79,7 +79,7 @@ export type CarouselNextProps = ComponentProps<typeof Button>
 export type CarouselDotsProps = ComponentProps<"div">
 
 const carouselControlClassName = cn(
-  "absolute z-20 !size-6 border border-border-primary/40 bg-surface/55 text-fg-primary shadow-md backdrop-blur-md [&_svg:not([class*='size-'])]:!size-3.5",
+  "absolute z-20 !size-6 border border-border-primary/40 glass [--glass-tint:var(--surface)] [--glass-opacity:55%] text-fg-primary shadow-md [&_svg:not([class*='size-'])]:!size-3.5",
   "hover:bg-surface/80 hover:text-fg-primary",
   "disabled:pointer-events-none disabled:opacity-0",
   motion.colors,

package/src/lifeline/lifeline-shell.tsx

@@ -57,7 +57,7 @@ export function LifelineNav({
   return (
     <nav
       className={cn(
-        "fixed inset-x-0 top-0 z-50 border-b border-border-primary bg-background-primary/80 backdrop-blur-xl transition-colors duration-300",
+        "fixed inset-x-0 top-0 z-50 border-b border-border-primary glass [--glass-blur:24px] transition-colors duration-300",
         className,
       )}
     >
@@ -117,7 +117,7 @@ export function LifelineFooter({
   return (
     <footer
       className={cn(
-        "shrink-0 border-t border-border-primary bg-background-primary/95 backdrop-blur-sm transition-colors duration-300",
+        "shrink-0 border-t border-border-primary glass [--glass-opacity:95%] [--glass-blur:8px] transition-colors duration-300",
         className,
       )}
     >

package/src/modal.tsx

@@ -52,7 +52,7 @@ const TRACKPAD_LABEL =
   "Swipe, use the arrow keys, or use the controls to navigate"
 
 const modalControlClassName =
-  "border-border-inverted bg-surface-inverted/60 text-fg-inverted shadow-md backdrop-blur-md hover:bg-surface-inverted/80 hover:text-fg-inverted outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-surface-inverted focus-visible:ring-ring/20"
+  "border-border-inverted glass [--glass-tint:var(--surface-inverted)] [--glass-opacity:60%] text-fg-inverted shadow-md hover:[--glass-opacity:80%] hover:text-fg-inverted outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-surface-inverted 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/video-player.tsx

@@ -300,7 +300,7 @@ export const VideoPlayer = ({
         {failed ? (
           <div
             role="alert"
-            className="mx-6 flex max-w-sm flex-col items-center gap-2 rounded-xl border border-white/15 bg-black/65 px-5 py-4 text-center text-white shadow-lg backdrop-blur-md"
+            className="mx-6 flex max-w-sm flex-col items-center gap-2 rounded-xl border border-white/15 glass [--glass-tint:var(--black)] [--glass-opacity:65%] px-5 py-4 text-center text-white shadow-lg"
           >
             <IconExclamationTriangle
               size={22}
@@ -316,7 +316,7 @@ export const VideoPlayer = ({
         ) : loading || buffering ? (
           <div
             role="status"
-            className="flex size-14 items-center justify-center rounded-full border border-white/15 bg-black/45 text-white shadow-lg backdrop-blur-md"
+            className="flex size-14 items-center justify-center rounded-full border border-white/15 glass [--glass-tint:var(--black)] [--glass-opacity:45%] text-white shadow-lg"
           >
             <span className="size-6 animate-spin rounded-full border-2 border-white/30 border-t-white motion-reduce:animate-none" />
             <span className="sr-only">
@@ -326,7 +326,7 @@ export const VideoPlayer = ({
         ) : !playing ? (
           <div
             className={cn(
-              "flex items-center justify-center rounded-full border border-white/20 bg-black/45 text-white shadow-lg backdrop-blur-md",
+              "flex items-center justify-center rounded-full border border-white/20 glass [--glass-tint:var(--black)] [--glass-opacity:45%] text-white shadow-lg",
               ended ? "h-8 gap-1 px-2.5" : "size-11",
             )}
           >