@kushagradhawan/kookie-ui 0.1.17 → 0.1.18

package/src/components/_internal/base-tab-list.props.ts

@@ -6,6 +6,7 @@ import type { PropDef } from '../../props/prop-def.js';
 const sizes = ['1', '2'] as const;
 const wrapValues = ['nowrap', 'wrap', 'wrap-reverse'] as const;
 const justifyValues = ['start', 'center', 'end'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const baseTabListPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
@@ -23,10 +24,12 @@ const baseTabListPropDefs = {
   },
   ...colorPropDef,
   ...highContrastPropDef,
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   wrap: PropDef<(typeof wrapValues)[number]>;
   justify: PropDef<(typeof justifyValues)[number]>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };
 
 export { baseTabListPropDefs };

package/src/components/alert-dialog.tsx

@@ -31,7 +31,7 @@ const AlertDialogTrigger = React.forwardRef<AlertDialogTriggerElement, AlertDial
     <AlertDialogPrimitive.Trigger {...props} ref={forwardedRef} asChild>
       {requireReactElement(children)}
     </AlertDialogPrimitive.Trigger>
-  )
+  ),
 );
 AlertDialogTrigger.displayName = 'AlertDialog.Trigger';
 
@@ -43,9 +43,23 @@ interface AlertDialogContentProps
 }
 const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDialogContentProps>(
   ({ align, ...props }, forwardedRef) => {
-    const { align: alignPropDef, ...propDefs } = alertDialogContentPropDefs;
+    const {
+      align: alignPropDef,
+      panelBackground: panelBackgroundPropDef,
+      ...propDefs
+    } = alertDialogContentPropDefs;
     const { className: alignClassName } = extractProps({ align }, { align: alignPropDef });
-    const { className, forceMount, container, ...contentProps } = extractProps(props, propDefs);
+    const { panelBackground } = extractProps(
+      { panelBackground: props.panelBackground },
+      { panelBackground: panelBackgroundPropDef },
+    );
+    const {
+      className,
+      forceMount,
+      container,
+      panelBackground: _,
+      ...contentProps
+    } = extractProps(props, propDefs);
     return (
       <AlertDialogPrimitive.Portal container={container} forceMount={forceMount}>
         <Theme asChild>
@@ -58,6 +72,7 @@ const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDial
                   {...contentProps}
                   ref={forwardedRef}
                   className={classNames('rt-BaseDialogContent', 'rt-AlertDialogContent', className)}
+                  data-panel-background={panelBackground}
                 />
               </div>
             </div>
@@ -65,7 +80,7 @@ const AlertDialogContent = React.forwardRef<AlertDialogContentElement, AlertDial
         </Theme>
       </AlertDialogPrimitive.Portal>
     );
-  }
+  },
 );
 AlertDialogContent.displayName = 'AlertDialog.Content';
 
@@ -76,7 +91,7 @@ const AlertDialogTitle = React.forwardRef<AlertDialogTitleElement, AlertDialogTi
     <AlertDialogPrimitive.Title asChild>
       <Heading size="5" mb="3" trim="start" {...props} asChild={false} ref={forwardedRef} />
     </AlertDialogPrimitive.Title>
-  )
+  ),
 );
 AlertDialogTitle.displayName = 'AlertDialog.Title';
 
@@ -100,7 +115,7 @@ const AlertDialogAction = React.forwardRef<AlertDialogActionElement, AlertDialog
     <AlertDialogPrimitive.Action {...props} ref={forwardedRef} asChild>
       {requireReactElement(children)}
     </AlertDialogPrimitive.Action>
-  )
+  ),
 );
 AlertDialogAction.displayName = 'AlertDialog.Action';
 
@@ -112,7 +127,7 @@ const AlertDialogCancel = React.forwardRef<AlertDialogCancelElement, AlertDialog
     <AlertDialogPrimitive.Cancel {...props} ref={forwardedRef} asChild>
       {requireReactElement(children)}
     </AlertDialogPrimitive.Cancel>
-  )
+  ),
 );
 AlertDialogCancel.displayName = 'AlertDialog.Cancel';
 

package/src/components/animations.css

@@ -88,6 +88,20 @@
   }
 }
 
+@keyframes rt-tab-indicator-appear {
+  0% {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .rt-PopperContent {
     animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
@@ -95,6 +109,7 @@
     &:where([data-state='open']) {
       animation-duration: 160ms;
 
+      /* Direction-aware animations (for dropdown menus with data-side) */
       &:where([data-side='top']) {
         animation-name: rt-slide-from-top, rt-fade-in;
       }
@@ -107,11 +122,17 @@
       &:where([data-side='right']) {
         animation-name: rt-slide-from-right, rt-fade-in;
       }
+      
+      /* Default animation (for selects without data-side) */
+      &:where(:not([data-side])) {
+        animation-name: rt-slide-from-bottom, rt-fade-in;
+      }
     }
 
     &:where([data-state='closed']) {
       animation-duration: 100ms;
 
+      /* Direction-aware animations (for dropdown menus with data-side) */
       &:where([data-side='top']) {
         animation-name: rt-slide-to-top, rt-fade-out;
       }
@@ -124,6 +145,16 @@
       &:where([data-side='right']) {
         animation-name: rt-slide-to-right, rt-fade-out;
       }
+      
+      /* Default animation (for selects without data-side) */
+      &:where(:not([data-side])) {
+        animation-name: rt-slide-to-bottom, rt-fade-out;
+      }
     }
   }
+
+  /* Tab indicator animations - only when motion is preferred */
+  .rt-BaseTabListTrigger:where([data-state='active'], [data-active])::before {
+    animation: rt-tab-indicator-appear var(--duration-3) var(--ease-3);
+  }
 }

package/src/components/avatar.css

@@ -7,8 +7,227 @@
   width: var(--avatar-size);
   height: var(--avatar-size);
   flex-shrink: 0;
+  position: relative;
 }
 
+/* Interactive states for avatars used as buttons/links */
+/* stylelint-disable selector-max-type */
+.rt-AvatarRoot:where(button),
+.rt-AvatarRoot:where(a),
+.rt-AvatarRoot:where([role="button"]) {
+  cursor: pointer;
+  transition: var(--transition-button);
+
+  /* Reduced motion support */
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  &:where(:focus-visible) {
+    outline: var(--focus-outline-width) solid var(--focus-8);
+    outline-offset: var(--focus-outline-offset);
+  }
+
+  /* NO scale transform - buttons don't use it */
+
+  &:where(:disabled),
+  &:where([data-disabled]) {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Apply subtle filters to avatars that display images on interaction */
+  @media (hover: hover) {
+    &:where(:hover:not(:disabled, [data-disabled])) :where(.rt-AvatarImage) {
+      filter: var(--avatar-image-hover-filter);
+    }
+  }
+
+  &:where(:active:not(:disabled, [data-disabled])) :where(.rt-AvatarImage) {
+    filter: var(--avatar-image-active-filter);
+  }
+
+  /* Disabled state for avatar images */
+  &:where(:disabled, [data-disabled]) :where(.rt-AvatarImage) {
+    filter: grayscale(1) opacity(0.6);
+  }
+
+  /* Classic variant - 3D button effects */
+  &:where(.rt-variant-classic) {
+    @media (hover: hover) {
+      &:where(:hover:not(:disabled, [data-disabled]))  {
+        background-color: var(--accent-3);
+        /* prettier-ignore */
+        box-shadow:
+          inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
+          inset 0 var(--classic-border-width) var(--white-a12),
+          inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+          inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
+          0 0 0 var(--classic-border-width) var(--accent-a5),
+          0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
+
+        :where(.dark, .dark-theme) &,
+        :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+          /* prettier-ignore */
+          box-shadow:
+            inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
+            inset 0 var(--classic-border-width) var(--accent-a11),
+            inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+            inset 0 var(--classic-shadow-offset-negative) var(--black-a11),
+            0 0 0 var(--classic-border-width-thick) var(--accent-a7),
+            0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12),
+            0 0 0 var(--classic-border-width) var(--accent-a5);
+        }
+
+        & :where(.rt-AvatarFallback) {
+          background-color: inherit;
+          box-shadow: inherit;
+        }
+      }
+    }
+
+    &:where(:active:not(:disabled, [data-disabled]))  {
+      padding-top: var(--classic-active-padding-offset-2);
+      padding-bottom: 0;
+      background-color: var(--accent-3);
+      box-shadow: inset 0 var(--classic-border-width) var(--black-a3), 0 0 0 var(--classic-border-width) var(--accent-a7);
+      /* keep root top unchanged; internal illusion achieved by padding */
+
+      & :where(.rt-AvatarFallback) {
+        padding-top: inherit;
+        padding-bottom: 0;
+        background-color: inherit;
+        box-shadow: inherit;
+      }
+    }
+  }
+
+  /* Solid variant - filter effects like buttons */
+  &:where(.rt-variant-solid) {
+    @media (hover: hover) {
+      &:where(:hover:not(:disabled, [data-disabled]))  {
+        background-color: var(--accent-10);
+        & :where(.rt-AvatarFallback) {
+          background-color: inherit;
+        }
+      }
+    }
+    &:where(:active:not(:disabled, [data-disabled]))  {
+      background-color: var(--accent-10);
+      filter: var(--base-button-solid-active-filter);
+      & :where(.rt-AvatarFallback) {
+        background-color: inherit;
+        filter: inherit;
+      }
+    }
+    
+    &:where(.rt-high-contrast) {
+      @media (hover: hover) {
+        &:where(:hover:not(:disabled, [data-disabled]))  {
+          background-color: var(--accent-12);
+          filter: var(--base-button-solid-high-contrast-hover-filter);
+          & :where(.rt-AvatarFallback) {
+            background-color: inherit;
+            filter: inherit;
+          }
+        }
+      }
+      &:where(:active:not(:disabled, [data-disabled]))  {
+        background-color: var(--accent-12);
+        filter: var(--base-button-solid-high-contrast-active-filter);
+        & :where(.rt-AvatarFallback) {
+          background-color: inherit;
+          filter: inherit;
+        }
+      }
+    }
+  }
+
+  /* Soft variant - background color changes with panel awareness */
+  &:where(.rt-variant-soft) {
+    @media (hover: hover) {
+      &:where(:hover:not(:disabled, [data-disabled]))  {
+        background-color: var(--accent-4);
+
+        :where([data-panel-background='translucent']) & {
+          background-color: var(--accent-a4);
+        }
+
+        & :where(.rt-AvatarFallback) {
+          background-color: inherit;
+        }
+      }
+    }
+    &:where(:active:not(:disabled, [data-disabled]))  {
+      background-color: var(--accent-5);
+
+      :where([data-panel-background='translucent']) & {
+        background-color: var(--accent-a5);
+      }
+
+      & :where(.rt-AvatarFallback) {
+        background-color: inherit;
+      }
+    }
+  }
+
+  /* Surface variant - border color changes */
+  &:where(.rt-variant-surface) {
+    @media (hover: hover) {
+      &:where(:hover:not(:disabled, [data-disabled]))  {
+        box-shadow: inset 0 0 0 1px var(--accent-8);
+        :where([data-panel-background='translucent']) & {
+          box-shadow: inset 0 0 0 1px var(--accent-a8);
+        }
+        & :where(.rt-AvatarFallback) {
+          box-shadow: inherit;
+        }
+      }
+    }
+    &:where(:active:not(:disabled, [data-disabled]))  {
+      background-color: var(--accent-3);
+      box-shadow: inset 0 0 0 1px var(--accent-8);
+      :where([data-panel-background='translucent']) & {
+        background-color: var(--accent-a3);
+        box-shadow: inset 0 0 0 1px var(--accent-a8);
+      }
+      & :where(.rt-AvatarFallback) {
+        background-color: inherit;
+        box-shadow: inherit;
+      }
+    }
+  }
+
+  /* Outline variant - background appears on interaction */
+  &:where(.rt-variant-outline) {
+    @media (hover: hover) {
+      &:where(:hover:not(:disabled, [data-disabled]))  {
+        background-color: var(--accent-2);
+        :where([data-panel-background='translucent']) & {
+          background-color: var(--accent-a2);
+          backdrop-filter: var(--backdrop-filter-components);
+        }
+        & :where(.rt-AvatarFallback) {
+          background-color: inherit;
+          backdrop-filter: inherit;
+        }
+      }
+    }
+    &:where(:active:not(:disabled, [data-disabled]))  {
+      background-color: var(--accent-3);
+      :where([data-panel-background='translucent']) & {
+        background-color: var(--accent-a3);
+        backdrop-filter: var(--backdrop-filter-components);
+      }
+      & :where(.rt-AvatarFallback) {
+        background-color: inherit;
+        backdrop-filter: inherit;
+      }
+    }
+  }
+}
+/* stylelint-enable selector-max-type */
+
 .rt-AvatarImage {
   width: 100%;
   height: 100%;
@@ -54,7 +273,7 @@
       --avatar-size: var(--space-5);
       --avatar-fallback-one-letter-font-size: var(--font-size-2);
       --avatar-fallback-two-letters-font-size: var(--font-size-1);
-      border-radius: max(var(--radius-2), var(--radius-full));
+      border-radius: max(var(--radius-1), var(--radius-full));
       letter-spacing: var(--letter-spacing-1);
     }
     &:where(.rt-r-size-2) {
@@ -75,37 +294,42 @@
       --avatar-size: var(--space-8);
       --avatar-fallback-one-letter-font-size: var(--font-size-5);
       --avatar-fallback-two-letters-font-size: var(--font-size-4);
-      border-radius: max(var(--radius-3), var(--radius-full));
+      border-radius: max(var(--radius-4), var(--radius-full));
       letter-spacing: var(--letter-spacing-4);
     }
     &:where(.rt-r-size-5) {
       --avatar-size: var(--space-9);
       --avatar-fallback-one-letter-font-size: var(--font-size-6);
-      border-radius: max(var(--radius-4), var(--radius-full));
-      letter-spacing: var(--letter-spacing-6);
+      --avatar-fallback-two-letters-font-size: var(--font-size-5);
+      border-radius: max(var(--radius-5), var(--radius-full));
+      letter-spacing: var(--letter-spacing-5);
     }
     &:where(.rt-r-size-6) {
       --avatar-size: 80px;
       --avatar-fallback-one-letter-font-size: var(--font-size-7);
-      border-radius: max(var(--radius-5), var(--radius-full));
-      letter-spacing: var(--letter-spacing-7);
+      --avatar-fallback-two-letters-font-size: var(--font-size-6);
+      border-radius: max(var(--radius-6), var(--radius-full));
+      letter-spacing: var(--letter-spacing-6);
     }
     &:where(.rt-r-size-7) {
       --avatar-size: 96px;
       --avatar-fallback-one-letter-font-size: var(--font-size-7);
-      border-radius: max(var(--radius-5), var(--radius-full));
+      --avatar-fallback-two-letters-font-size: var(--font-size-6);
+      border-radius: max(var(--radius-7), var(--radius-full));
       letter-spacing: var(--letter-spacing-7);
     }
     &:where(.rt-r-size-8) {
       --avatar-size: 128px;
       --avatar-fallback-one-letter-font-size: var(--font-size-8);
-      border-radius: max(var(--radius-6), var(--radius-full));
+      --avatar-fallback-two-letters-font-size: var(--font-size-7);
+      border-radius: max(var(--radius-8), var(--radius-full));
       letter-spacing: var(--letter-spacing-8);
     }
     &:where(.rt-r-size-9) {
       --avatar-size: 160px;
       --avatar-fallback-one-letter-font-size: var(--font-size-9);
-      border-radius: max(var(--radius-6), var(--radius-full));
+      --avatar-fallback-two-letters-font-size: var(--font-size-8);
+      border-radius: max(var(--radius-9), var(--radius-full));
       letter-spacing: var(--letter-spacing-9);
     }
   }
@@ -128,16 +352,219 @@
     background-color: var(--accent-12);
     color: var(--accent-1);
   }
+  &:where([data-disabled]) :where(.rt-AvatarFallback) {
+    color: var(--gray-a8);
+    background-color: var(--gray-a3);
+    filter: none;
+  }
 }
 
 /* soft */
 
 .rt-AvatarRoot:where(.rt-variant-soft) {
   & :where(.rt-AvatarFallback) {
+    /* Base state: solid accent for solid panels */
+    background-color: var(--accent-3);
+    color: var(--accent-11);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent']) & {
+      background-color: var(--accent-a3);
+      color: var(--accent-a11);
+      backdrop-filter: var(--backdrop-filter-components);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    :where(.rt-AvatarRoot[data-panel-background='solid']) & {
+      background-color: var(--accent-3);
+      color: var(--accent-11);
+      backdrop-filter: none;
+      --backdrop-filter-components: none;
+    }
+
+    :where(.rt-AvatarRoot[data-panel-background='translucent']) & {
+      background-color: var(--accent-a3);
+      color: var(--accent-a11);
+      backdrop-filter: var(--backdrop-filter-components);
+      --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    }
+  }
+  &:where(.rt-high-contrast) :where(.rt-AvatarFallback) {
+    background-color: var(--accent-3);
+    color: var(--accent-12);
+    
+    :where([data-panel-background='translucent']) & {
     background-color: var(--accent-a3);
+      color: var(--accent-a12);
+    }
+  }
+  &:where([data-disabled]) :where(.rt-AvatarFallback) {
+    color: var(--gray-a8);
+    background-color: var(--gray-a3);
+    backdrop-filter: none;
+  }
+}
+
+/* surface */
+
+.rt-AvatarRoot:where(.rt-variant-surface) {
+  & :where(.rt-AvatarFallback) {
+    /* Base state: solid colors for solid panels */
+    background-color: var(--accent-2);
+    box-shadow: inset 0 0 0 1px var(--accent-7);
+    color: var(--accent-a11);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent']) & {
+      background-color: var(--accent-a2);
+      box-shadow: inset 0 0 0 1px var(--accent-a7);
+      backdrop-filter: var(--backdrop-filter-components);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    :where(.rt-AvatarRoot[data-panel-background='solid']) & {
+      background-color: var(--accent-2);
+      box-shadow: inset 0 0 0 1px var(--accent-7);
+      backdrop-filter: none;
+      --backdrop-filter-components: none;
+    }
+
+    :where(.rt-AvatarRoot[data-panel-background='translucent']) & {
+      background-color: var(--accent-a2);
+      box-shadow: inset 0 0 0 1px var(--accent-a7);
+      backdrop-filter: var(--backdrop-filter-components);
+      --backdrop-filter-components: blur(var(--backdrop-blur-components));
+    }
+  }
+  &:where(.rt-high-contrast) :where(.rt-AvatarFallback) {
+    color: var(--accent-12);
+  }
+  &:where([data-disabled]) :where(.rt-AvatarFallback) {
+    color: var(--gray-a8);
+    background-color: var(--gray-a2);
+    box-shadow: inset 0 0 0 1px var(--gray-a6);
+    backdrop-filter: none;
+  }
+}
+
+/* outline */
+
+.rt-AvatarRoot:where(.rt-variant-outline) {
+  & :where(.rt-AvatarFallback) {
+    /* Base state: solid colors for solid panels */
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1px var(--accent-8);
+    color: var(--accent-11);
+
+    /* Theme-level translucent override */
+    :where([data-panel-background='translucent']) & {
+      box-shadow: inset 0 0 0 1px var(--accent-a8);
+      color: var(--accent-a11);
+    }
+
+    /* Component-level overrides (higher specificity) */
+    :where(.rt-AvatarRoot[data-panel-background='solid']) & {
+      box-shadow: inset 0 0 0 1px var(--accent-8);
+      color: var(--accent-11);
+      backdrop-filter: none;
+      --backdrop-filter-components: none;
+    }
+
+    :where(.rt-AvatarRoot[data-panel-background='translucent']) & {
+      box-shadow: inset 0 0 0 1px var(--accent-a8);
+      color: var(--accent-a11);
+    }
+  }
+  &:where(.rt-high-contrast) :where(.rt-AvatarFallback) {
+    box-shadow:
+      inset 0 0 0 1px var(--accent-7),
+      inset 0 0 0 1px var(--gray-11);
+    color: var(--accent-12);
+    
+    /* Theme-level translucent override for high contrast */
+    :where([data-panel-background='translucent']) & {
+      box-shadow:
+        inset 0 0 0 1px var(--accent-a7),
+        inset 0 0 0 1px var(--gray-a11);
+    }
+
+    /* Component-level overrides for high contrast */
+    :where(.rt-AvatarRoot[data-panel-background='solid']) & {
+      box-shadow:
+        inset 0 0 0 1px var(--accent-7),
+        inset 0 0 0 1px var(--gray-11);
+    }
+
+    :where(.rt-AvatarRoot[data-panel-background='translucent']) & {
+      box-shadow:
+        inset 0 0 0 1px var(--accent-a7),
+        inset 0 0 0 1px var(--gray-a11);
+    }
+  }
+  &:where([data-disabled]) :where(.rt-AvatarFallback) {
+    color: var(--gray-a8);
+    background-color: transparent;
+    box-shadow: inset 0 0 0 1px var(--gray-a7);
+    backdrop-filter: none;
+  }
+}
+
+/* classic */
+
+.rt-AvatarRoot:where(.rt-variant-classic) {
+  /* Match button's slight elevation */
+  position: relative;
+  top: var(--classic-elevation-offset);
+  & :where(.rt-AvatarFallback) {
+    position: relative;
+    top: 0; /* reset – elevation handled by root now */
     color: var(--accent-a11);
+    background-color: var(--accent-2);
+    /* prettier-ignore */
+    box-shadow:
+      inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a2),
+      inset 0 var(--classic-border-width) var(--white-a12),
+      inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+      inset 0 calc(-1 * var(--classic-border-width)) var(--accent-a6),
+      0 0 0 var(--classic-border-width) var(--accent-a5),
+      0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--accent-a7);
+
+    :where(.dark, .dark-theme) &,
+    :where(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) & {
+      /* prettier-ignore */
+      box-shadow:
+        inset 0 calc(-1 * var(--classic-border-width)) var(--classic-shadow-blur-large) var(--accent-a3),
+        inset 0 var(--classic-border-width) var(--accent-a11),
+        inset 0 var(--classic-shadow-blur-medium) var(--classic-shadow-blur-large) var(--accent-a2),
+        inset 0 calc(-2 * var(--classic-border-width)) var(--black-a11),
+        0 0 0 var(--classic-border-width-thick) var(--accent-a7),
+        0 var(--classic-shadow-offset-y) var(--classic-shadow-blur-small) var(--black-a12);
+    }
   }
   &:where(.rt-high-contrast) :where(.rt-AvatarFallback) {
     color: var(--accent-12);
+    background-color: var(--accent-2);
+  }
+  &:where([data-disabled]) :where(.rt-AvatarFallback) {
+    color: var(--gray-a8);
+    background-color: var(--gray-a3);
+    box-shadow: none;
+    top: 0;
   }
 }
+
+/* ---------------------------------------------------------------------------------------------- */
+/* Avatar image filter tokens                                                                     */
+/* ---------------------------------------------------------------------------------------------- */
+
+:where(.radix-themes) {
+  /* Hover and active filters for avatars that display images */
+  --avatar-image-hover-filter: brightness(0.95) saturate(1.05);
+  --avatar-image-active-filter: brightness(0.9) saturate(1.1);
+}
+
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  --avatar-image-hover-filter: brightness(1.05) saturate(1.05);
+  --avatar-image-active-filter: brightness(1.1) saturate(1.1);
+}

package/src/components/avatar.props.tsx

@@ -6,7 +6,8 @@ import { radiusPropDef } from '../props/radius.prop.js';
 import type { PropDef } from '../props/prop-def.js';
 
 const sizes = ['1', '2', '3', '4', '5', '6', '7', '8', '9'] as const;
-const variants = ['solid', 'soft'] as const;
+const variants = ['solid', 'soft', 'surface', 'outline'] as const;
+const panelBackgrounds = ['solid', 'translucent'] as const;
 
 const avatarPropDefs = {
   ...asChildPropDef,
@@ -16,10 +17,12 @@ const avatarPropDefs = {
   ...highContrastPropDef,
   ...radiusPropDef,
   fallback: { type: 'ReactNode', required: true },
+  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   fallback: PropDef<React.ReactNode>;
+  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
 };
 
 export { avatarPropDefs };