fix(clerk-js): Remove the card glass effect (#2715)

clerk · Feb 2, 2024 · 13cfbf4 · 13cfbf4
1 parent 2d8c32e
commit 13cfbf4
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 13 deletions.
diff --git a/.changeset/yellow-papayas-help.md b/.changeset/yellow-papayas-help.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
@@ -5,6 +5,7 @@ import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../
 import { common, mqu, type PropsOfComponent } from '../../styledSystem';
 import { colors } from '../../utils';
 import { Card } from '.';
+
 type CardFooterProps = PropsOfComponent<typeof Flex>;
 export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((props, ref) => {
   const { children, sx, ...rest } = props;
@@ -23,10 +24,9 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
           marginTop: `-${t.space.$2}`,
           paddingTop: t.space.$2,
           background: common.mergedColorsBackground(
-            colors.setAlpha(t.colors.$colorBackground, 0.8),
+            colors.setAlpha(t.colors.$colorBackground, 1),
             t.colors.$blackAlpha50,
           ),
-          backdropFilter: t.backdropFilters.$defaultBlur,
           '>:first-of-type': {
             padding: `${t.space.$4} ${t.space.$8} ${t.space.$4} ${t.space.$8}`,
           },

diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx
@@ -142,10 +142,9 @@ const NavbarContainer = (
         width: t.sizes.$57,
         maxWidth: t.space.$57,
         background: common.mergedColorsBackground(
-          colors.setAlpha(t.colors.$colorBackground, 0.8),
+          colors.setAlpha(t.colors.$colorBackground, 1),
           t.colors.$blackAlpha50,
         ),
-        backdropFilter: t.backdropFilters.$defaultBlur,
         padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
         marginRight: `-${t.space.$2}`,
         color: t.colors.$colorText,
@@ -303,10 +302,9 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
       sx={t => ({
         display: 'none',
         background: common.mergedColorsBackground(
-          colors.setAlpha(t.colors.$colorBackground, 0.8),
+          colors.setAlpha(t.colors.$colorBackground, 1),
           t.colors.$blackAlpha50,
         ),
-        backdropFilter: t.backdropFilters.$defaultBlur,
         padding: `${t.space.$2} ${t.space.$3} ${t.space.$4} ${t.space.$3}`,
         marginBottom: `-${t.space.$2}`,
         [mqu.md]: {

diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
@@ -17,7 +17,6 @@ const PopoverCardRoot = React.forwardRef<HTMLDivElement, PropsOfComponent<typeof
           width: t.sizes.$94,
           maxWidth: `calc(100vw - ${t.sizes.$8})`,
           zIndex: t.zIndices.$modal,
-          backdropFilter: t.backdropFilters.$defaultBlur,
           borderRadius: t.radii.$xl,
           animation: `${animations.dropdownSlideInScaleAndFade} ${t.transitionDuration.$fast}`,
         })}
@@ -62,7 +61,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
       sx={[
         t => ({
           background: common.mergedColorsBackground(
-            colors.setAlpha(t.colors.$colorBackground, 0.8),
+            colors.setAlpha(t.colors.$colorBackground, 1),
             t.colors.$blackAlpha50,
           ),
           marginTop: `-${t.space.$2}`,

diff --git a/packages/clerk-js/src/ui/foundations/backdropFilters.ts b/packages/clerk-js/src/ui/foundations/backdropFilters.ts
diff --git a/packages/clerk-js/src/ui/foundations/defaultFoundations.ts b/packages/clerk-js/src/ui/foundations/defaultFoundations.ts
@@ -1,4 +1,3 @@
-import { backdropFilters } from './backdropFilters';
 import { borders } from './borders';
 import { colors } from './colors';
 import { opacity } from './opacity';
@@ -24,7 +23,6 @@ const defaultInternalThemeFoundations = Object.freeze({
   sizes,
   space,
   shadows,
-  backdropFilters,
   transitionProperty,
   transitionTiming,
   transitionDuration,