Merge pull request #306 from radixdlt/tweak/connect-button-transparency

tweak: Removes connect button overlay transparency

packages/connect-button/src/components/connect-button.ts

@@ -96,8 +96,6 @@ export class ConnectButton extends LitElement {
 
   pristine = true
   initialBodyOverflow: string
-  initialBackdropFilter: string
-  parentElementWithBackdropFilter: HTMLElement | null
 
   windowClickEventHandler: (event: MouseEvent) => void
 
@@ -119,8 +117,6 @@ export class ConnectButton extends LitElement {
   constructor() {
     super()
     this.initialBodyOverflow = document.body.style.overflow
-    this.initialBackdropFilter = ''
-    this.parentElementWithBackdropFilter = null
     this.injectFontCSS()
     this.windowClickEventHandler = (event) => {
       if (!this.showPopoverMenu) return
@@ -174,7 +170,6 @@ export class ConnectButton extends LitElement {
     this.pristine = false
     this.showPopoverMenu = !this.showPopoverMenu
     this.toggleBodyOverflow()
-    this.toggleParentBackdropFilter()
     if (this.showPopoverMenu) {
       this.dispatchEvent(
         new CustomEvent('onShowPopover', {
@@ -193,47 +188,6 @@ export class ConnectButton extends LitElement {
         : this.initialBodyOverflow
   }
 
-  private toggleParentBackdropFilter() {
-    const OPACITY_TRANSITION_DURATION = 180
-
-    if (!this.showPopoverMenu && this.parentElementWithBackdropFilter) {
-      setTimeout(() => {
-        this.parentElementWithBackdropFilter?.style.setProperty(
-          'backdrop-filter',
-          this.initialBackdropFilter,
-        )
-        this.initialBackdropFilter = ''
-        this.parentElementWithBackdropFilter = null
-      }, OPACITY_TRANSITION_DURATION)
-
-      return
-    } else {
-      const parent = this.findParentWithBackdropFilter(this)
-      if (parent === null) {
-        return
-      }
-      this.initialBackdropFilter = parent.backdropFilter
-      this.parentElementWithBackdropFilter = parent.element
-
-      parent.element.style.backdropFilter = 'none'
-    }
-  }
-
-  private findParentWithBackdropFilter(
-    element: HTMLElement | null,
-  ): { element: HTMLElement; backdropFilter: string } | null {
-    if (!element) {
-      return null
-    }
-    const style = window.getComputedStyle(element)
-    const backdropFilter = style.getPropertyValue('backdrop-filter')
-    if (backdropFilter !== 'none') {
-      return { element, backdropFilter }
-    } else {
-      return this.findParentWithBackdropFilter(element.parentElement)
-    }
-  }
-
   private connectButtonTemplate() {
     const buttonText = this.connected ? this.personaLabel : 'Connect'
 

packages/connect-button/src/components/popover/popover.ts

@@ -75,8 +75,6 @@ export class RadixPopover extends LitElement {
         justify-content: center;
         align-items: flex-start;
         background: var(--radix-popover-background);
-        backdrop-filter: blur(30px);
-        -webkit-backdrop-filter: blur(30px);
         box-sizing: border-box;
         max-height: 100vh;
         border-radius: 12px;

packages/connect-button/src/stories/blur-header.stories.ts

@@ -51,80 +51,7 @@ export const Example: StoryObj = {
       accumsan turpis, ac tempor mauris hendrerit ut. Quisque hendrerit feugiat
       enim sit amet blandit. Sed efficitur ultrices quam viverra accumsan. Donec
       vehicula hendrerit purus at laoreet. Cras et ultrices justo, sed hendrerit
-      tellus. Ut efficitur dolor nec magna tincidunt mollis eu eget nibh. Mauris
-      sit amet interdum mauris, quis fringilla ex. Duis augue enim, gravida ac
-      lectus fermentum, semper egestas magna. Sed at metus non magna tempus
-      suscipit nec et massa. Pellentesque ut sem ut nunc gravida vehicula sit
-      amet at felis. Suspendisse suscipit pulvinar ipsum, non eleifend velit
-      ultrices eu. Maecenas vitae semper quam. Suspendisse molestie pulvinar
-      lorem eu iaculis. Sed ut ligula nisl. Pellentesque habitant morbi
-      tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
-      in rhoncus sem. Etiam dignissim ex non efficitur ultricies. Vestibulum
-      ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
-      curae; In finibus, orci et feugiat maximus, sem massa finibus nisi, ut
-      viverra risus lacus vel est. Vestibulum semper blandit aliquam. Sed a orci
-      dolor. Vivamus consequat eros urna, vel volutpat erat egestas quis.
-      Integer accumsan lorem sit amet tristique maximus. Aenean pharetra commodo
-      dolor. Suspendisse dapibus nibh eget volutpat tempus. Interdum et
-      malesuada fames ac ante ipsum primis in faucibus. In feugiat scelerisque
-      risus pharetra vestibulum. Praesent suscipit eget velit id laoreet. Morbi
-      quis arcu gravida augue placerat pharetra vitae id dui. Nunc congue tempus
-      eleifend. Ut sed vulputate sem. Vivamus dignissim est ut turpis consequat
-      dignissim. Aenean eget facilisis dui, vitae rutrum eros. Nullam dignissim
-      non ipsum a aliquet. Etiam dolor augue, sodales ac magna in, sagittis
-      tempus leo. Maecenas eu sapien bibendum, consectetur nibh quis, ornare
-      felis. Quisque ornare luctus lacus sed condimentum. Praesent lorem ex,
-      efficitur sed orci eget, tincidunt egestas mi. Vivamus blandit sapien sit
-      amet nunc consectetur feugiat. Cras tempor sagittis est, vitae mollis
-      libero auctor at. Integer eget enim mollis, elementum arcu a, maximus
-      diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec
-      mi lectus, suscipit non dolor commodo, tempor blandit nunc. Interdum et
-      malesuada fames ac ante ipsum primis in faucibus. Nulla pellentesque
-      elementum risus scelerisque posuere. Nullam gravida lectus eget eros
-      molestie bibendum. Suspendisse at elit porttitor, commodo tellus et,
-      pharetra nisl. Ut fringilla, massa vel sagittis consectetur, tortor purus
-      ornare risus, in molestie sem nibh in eros. Phasellus ac odio vel tellus
-      posuere volutpat eu vitae augue. Maecenas finibus ultricies odio, sed
-      gravida urna vulputate feugiat. Donec nulla quam, tempor vitae bibendum
-      sed, ultricies ut magna. Sed varius condimentum metus eu ultricies.
-      Phasellus lacus justo, faucibus ac efficitur a, lobortis suscipit odio.
-      Sed sed blandit ipsum, ut pellentesque mauris. Duis viverra vehicula
-      fringilla. Mauris nec tempus nulla. Nulla at tortor at est malesuada
-      pharetra non ac neque. Integer vel scelerisque leo. Nam non nibh id nibh
-      placerat semper ullamcorper et justo. Sed elementum euismod interdum. Cras
-      a auctor purus. Etiam rhoncus pulvinar metus, sit amet mollis justo
-      suscipit sed. Donec id tristique ante. Ut ut augue cursus, finibus nisi
-      vel, egestas lectus. Donec eu dolor in justo hendrerit porttitor nec quis
-      felis. Vestibulum ut fringilla arcu. Donec bibendum ex nec viverra
-      imperdiet. Pellentesque sed elementum lorem. Integer rutrum neque diam, id
-      vehicula sapien malesuada at. Morbi efficitur elit vel tempor congue. Nam
-      a pulvinar odio. Sed nec lobortis diam. Proin fermentum lorem ligula, non
-      sodales urna tempor vitae. Phasellus nec tincidunt nibh, ac vehicula
-      purus. Mauris quis dolor ut ante egestas volutpat in ut libero. Integer eu
-      nibh convallis nulla sodales mattis quis sit amet purus. Duis sed metus
-      augue. Nam ac quam dignissim, tincidunt mauris feugiat, porttitor risus.
-      Maecenas quis urna quis magna vulputate porta. Praesent a erat nisi. Donec
-      pharetra imperdiet tellus, non lobortis nisi tincidunt et. Pellentesque
-      laoreet, arcu in fermentum egestas, metus tellus feugiat erat, non pretium
-      ex nibh in dolor. Sed in bibendum diam. Phasellus ante neque, dapibus a
-      nunc eget, commodo laoreet tortor. Nullam aliquam vitae nisi eu tincidunt.
-      Pellentesque tristique magna sed nulla rutrum porta. Donec tellus nulla,
-      auctor et hendrerit posuere, consectetur vel turpis. Phasellus ac interdum
-      diam. Suspendisse ullamcorper metus eu lacus varius euismod. Suspendisse
-      est magna, sagittis ac erat quis, interdum interdum tortor. Maecenas
-      sollicitudin est id condimentum eleifend. Suspendisse potenti. Vivamus
-      hendrerit nulla quis viverra molestie. Suspendisse ut auctor tortor.
-      Aliquam sed risus arcu. Donec pulvinar massa id felis malesuada fermentum.
-      Ut eget diam nec ipsum mollis condimentum. Duis posuere in lectus non
-      commodo. Curabitur tincidunt tristique scelerisque. Quisque porta diam
-      risus, vitae blandit purus posuere id. Sed venenatis nisl ac risus laoreet
-      ornare. Mauris vel justo dignissim, tristique nibh nec, fermentum felis.
-      Suspendisse egestas massa congue metus mollis, eget venenatis urna
-      eleifend. Fusce velit lorem, varius ac lectus porta, bibendum egestas
-      tellus. Donec pellentesque justo sed fringilla finibus. Donec bibendum id
-      diam sit amet facilisis. Etiam eu diam id libero ultrices ornare non eu
-      enim. Vivamus et viverra urna. Etiam a tincidunt elit, a lobortis nisl. Ut
-      consectetur tempor tellus sed egestas. Proin elementum quam ac elit
+      tellus. Ut efficitur dolor nec magna tincidunt mollis eu eget nibh.
     </main>
   `,
 }
@@ -185,80 +112,7 @@ export const Example2: StoryObj = {
       accumsan turpis, ac tempor mauris hendrerit ut. Quisque hendrerit feugiat
       enim sit amet blandit. Sed efficitur ultrices quam viverra accumsan. Donec
       vehicula hendrerit purus at laoreet. Cras et ultrices justo, sed hendrerit
-      tellus. Ut efficitur dolor nec magna tincidunt mollis eu eget nibh. Mauris
-      sit amet interdum mauris, quis fringilla ex. Duis augue enim, gravida ac
-      lectus fermentum, semper egestas magna. Sed at metus non magna tempus
-      suscipit nec et massa. Pellentesque ut sem ut nunc gravida vehicula sit
-      amet at felis. Suspendisse suscipit pulvinar ipsum, non eleifend velit
-      ultrices eu. Maecenas vitae semper quam. Suspendisse molestie pulvinar
-      lorem eu iaculis. Sed ut ligula nisl. Pellentesque habitant morbi
-      tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus
-      in rhoncus sem. Etiam dignissim ex non efficitur ultricies. Vestibulum
-      ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
-      curae; In finibus, orci et feugiat maximus, sem massa finibus nisi, ut
-      viverra risus lacus vel est. Vestibulum semper blandit aliquam. Sed a orci
-      dolor. Vivamus consequat eros urna, vel volutpat erat egestas quis.
-      Integer accumsan lorem sit amet tristique maximus. Aenean pharetra commodo
-      dolor. Suspendisse dapibus nibh eget volutpat tempus. Interdum et
-      malesuada fames ac ante ipsum primis in faucibus. In feugiat scelerisque
-      risus pharetra vestibulum. Praesent suscipit eget velit id laoreet. Morbi
-      quis arcu gravida augue placerat pharetra vitae id dui. Nunc congue tempus
-      eleifend. Ut sed vulputate sem. Vivamus dignissim est ut turpis consequat
-      dignissim. Aenean eget facilisis dui, vitae rutrum eros. Nullam dignissim
-      non ipsum a aliquet. Etiam dolor augue, sodales ac magna in, sagittis
-      tempus leo. Maecenas eu sapien bibendum, consectetur nibh quis, ornare
-      felis. Quisque ornare luctus lacus sed condimentum. Praesent lorem ex,
-      efficitur sed orci eget, tincidunt egestas mi. Vivamus blandit sapien sit
-      amet nunc consectetur feugiat. Cras tempor sagittis est, vitae mollis
-      libero auctor at. Integer eget enim mollis, elementum arcu a, maximus
-      diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec
-      mi lectus, suscipit non dolor commodo, tempor blandit nunc. Interdum et
-      malesuada fames ac ante ipsum primis in faucibus. Nulla pellentesque
-      elementum risus scelerisque posuere. Nullam gravida lectus eget eros
-      molestie bibendum. Suspendisse at elit porttitor, commodo tellus et,
-      pharetra nisl. Ut fringilla, massa vel sagittis consectetur, tortor purus
-      ornare risus, in molestie sem nibh in eros. Phasellus ac odio vel tellus
-      posuere volutpat eu vitae augue. Maecenas finibus ultricies odio, sed
-      gravida urna vulputate feugiat. Donec nulla quam, tempor vitae bibendum
-      sed, ultricies ut magna. Sed varius condimentum metus eu ultricies.
-      Phasellus lacus justo, faucibus ac efficitur a, lobortis suscipit odio.
-      Sed sed blandit ipsum, ut pellentesque mauris. Duis viverra vehicula
-      fringilla. Mauris nec tempus nulla. Nulla at tortor at est malesuada
-      pharetra non ac neque. Integer vel scelerisque leo. Nam non nibh id nibh
-      placerat semper ullamcorper et justo. Sed elementum euismod interdum. Cras
-      a auctor purus. Etiam rhoncus pulvinar metus, sit amet mollis justo
-      suscipit sed. Donec id tristique ante. Ut ut augue cursus, finibus nisi
-      vel, egestas lectus. Donec eu dolor in justo hendrerit porttitor nec quis
-      felis. Vestibulum ut fringilla arcu. Donec bibendum ex nec viverra
-      imperdiet. Pellentesque sed elementum lorem. Integer rutrum neque diam, id
-      vehicula sapien malesuada at. Morbi efficitur elit vel tempor congue. Nam
-      a pulvinar odio. Sed nec lobortis diam. Proin fermentum lorem ligula, non
-      sodales urna tempor vitae. Phasellus nec tincidunt nibh, ac vehicula
-      purus. Mauris quis dolor ut ante egestas volutpat in ut libero. Integer eu
-      nibh convallis nulla sodales mattis quis sit amet purus. Duis sed metus
-      augue. Nam ac quam dignissim, tincidunt mauris feugiat, porttitor risus.
-      Maecenas quis urna quis magna vulputate porta. Praesent a erat nisi. Donec
-      pharetra imperdiet tellus, non lobortis nisi tincidunt et. Pellentesque
-      laoreet, arcu in fermentum egestas, metus tellus feugiat erat, non pretium
-      ex nibh in dolor. Sed in bibendum diam. Phasellus ante neque, dapibus a
-      nunc eget, commodo laoreet tortor. Nullam aliquam vitae nisi eu tincidunt.
-      Pellentesque tristique magna sed nulla rutrum porta. Donec tellus nulla,
-      auctor et hendrerit posuere, consectetur vel turpis. Phasellus ac interdum
-      diam. Suspendisse ullamcorper metus eu lacus varius euismod. Suspendisse
-      est magna, sagittis ac erat quis, interdum interdum tortor. Maecenas
-      sollicitudin est id condimentum eleifend. Suspendisse potenti. Vivamus
-      hendrerit nulla quis viverra molestie. Suspendisse ut auctor tortor.
-      Aliquam sed risus arcu. Donec pulvinar massa id felis malesuada fermentum.
-      Ut eget diam nec ipsum mollis condimentum. Duis posuere in lectus non
-      commodo. Curabitur tincidunt tristique scelerisque. Quisque porta diam
-      risus, vitae blandit purus posuere id. Sed venenatis nisl ac risus laoreet
-      ornare. Mauris vel justo dignissim, tristique nibh nec, fermentum felis.
-      Suspendisse egestas massa congue metus mollis, eget venenatis urna
-      eleifend. Fusce velit lorem, varius ac lectus porta, bibendum egestas
-      tellus. Donec pellentesque justo sed fringilla finibus. Donec bibendum id
-      diam sit amet facilisis. Etiam eu diam id libero ultrices ornare non eu
-      enim. Vivamus et viverra urna. Etiam a tincidunt elit, a lobortis nisl. Ut
-      consectetur tempor tellus sed egestas. Proin elementum quam ac elit
+      tellus. Ut efficitur dolor nec magna tincidunt mollis eu eget nibh.
     </main>
   `,
 }

packages/connect-button/src/theme.ts

@@ -47,7 +47,7 @@ export const themeCSS = css`
   }
 
   :host([mode='light']) {
-    --radix-popover-background: color-mix(in srgb, #efefef 50%, transparent);
+    --radix-popover-background: #e4e4e4;
     --radix-popover-border-color: var(--color-grey-3);
     --radix-popover-text-color: var(--color-grey-1);
 
@@ -75,7 +75,7 @@ export const themeCSS = css`
 
     --radix-button-background: color-mix(
       in srgb,
-      var(--color-light) 80%,
+      var(--color-light) 70%,
       transparent
     );
     --radix-button-background-hover: var(--color-light);
@@ -93,7 +93,7 @@ export const themeCSS = css`
   }
 
   :host([mode='dark']) {
-    --radix-popover-background: color-mix(in srgb, #000000 50%, transparent);
+    --radix-popover-background: #5c5c5c; // Effective colour of background in designs without transparency
     --radix-popover-border-color: var(--color-dark);
     --radix-popover-text-color: var(--color-light);
 
@@ -103,11 +103,11 @@ export const themeCSS = css`
       transparent
     );
     --radix-popover-tabs-button-active-text-color: var(--color-light);
-    --radix-popover-tabs-button-active-background: #515151;
+    --radix-popover-tabs-button-active-background: #494949;
 
     --radix-link-color: var(--color-white);
 
-    --radix-card-background: #515151;
+    --radix-card-background: #494949;
     --radix-card-text-color: var(--color-light);
     --radix-card-text-dimmed-color: var(--color-grey-3);
     --radix-card-inverted-background: var(--color-grey-5);