fix(mosaic): keep filled icon frames tinted on row hover (#10423)

Author: alexcarpenter

.changeset/mosaic-icon-frame-hover.md

@@ -0,0 +1,5 @@
+---
+'@clerk/mosaic': patch
+---
+
+Filled icon frames now use a translucent background, so they darken with the row on hover instead of showing as a lighter patch. The reverification method picker's icon frames no longer have a border.

packages/mosaic/src/components/icon/icon-frame.styles.ts

@@ -20,7 +20,7 @@ export const styles = stylex.create({
     borderColor: colorVars['--cl-color-border'],
   },
   filled: {
-    backgroundColor: colorVars['--cl-color-background-subtle'],
+    backgroundColor: colorVars['--cl-color-neutral-alpha-100'],
   },
 });
 

packages/mosaic/src/features/reverification/steps/reverification-method-picker.tsx

@@ -79,7 +79,10 @@ export function ReverificationMethodPicker({
                 }
               >
                 <Item.Media>
-                  <IconFrame filled>
+                  <IconFrame
+                    filled
+                    bordered={false}
+                  >
                     <Icon glyph={method.icon} />
                   </IconFrame>
                 </Item.Media>