From 9a63e7f819cf72f0001fbf0718b4dddc9cc01cc8 Mon Sep 17 00:00:00 2001 From: David Edey Date: Thu, 19 Dec 2024 19:04:50 +0000 Subject: [PATCH 1/4] tweak: Removes connect button overlay transparency The transparency was causing nasty contrast issues when overlaying dark/light mode on different backgrounds. Instead, the background colours have been fixed, and some of the internal colours tweaked slightly, so that all UI elements are visible and have contrast, and distinguishable hover states. --- packages/connect-button/src/theme.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/connect-button/src/theme.ts b/packages/connect-button/src/theme.ts index a912fcbb..17f8176f 100644 --- a/packages/connect-button/src/theme.ts +++ b/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); From a7dc0ff3345847f67267eb4b9ba03f2946dc72ed Mon Sep 17 00:00:00 2001 From: David Edey Date: Thu, 19 Dec 2024 21:51:52 +0000 Subject: [PATCH 2/4] tweak: Remove now unused backdrop-filter on popover --- packages/connect-button/src/components/popover/popover.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/connect-button/src/components/popover/popover.ts b/packages/connect-button/src/components/popover/popover.ts index ea8fb9aa..966c7229 100644 --- a/packages/connect-button/src/components/popover/popover.ts +++ b/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; From 37b497ef5197cd7868e6e2b2429bd5ac2a55511b Mon Sep 17 00:00:00 2001 From: David Edey Date: Thu, 19 Dec 2024 21:53:07 +0000 Subject: [PATCH 3/4] tweak: Add white and black background to storybook --- packages/connect-button/.storybook/preview.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/connect-button/.storybook/preview.js b/packages/connect-button/.storybook/preview.js index 79106bd5..f3c1f9af 100644 --- a/packages/connect-button/.storybook/preview.js +++ b/packages/connect-button/.storybook/preview.js @@ -59,6 +59,14 @@ export const parameters = { name: 'dark-grey', value: '#424245', }, + { + name: 'black', + value: '#000000', + }, + { + name: 'white', + value: '#ffffff', + }, ], }, }, From 49c76d440f5e3ee202d9d4d885c16ecd8c577dba Mon Sep 17 00:00:00 2001 From: David Edey Date: Fri, 20 Dec 2024 10:53:04 +0000 Subject: [PATCH 4/4] tweak: Reverted #257 now that it doesn't apply --- .../src/components/connect-button.ts | 46 ------ .../src/stories/blur-header.stories.ts | 150 +----------------- 2 files changed, 2 insertions(+), 194 deletions(-) diff --git a/packages/connect-button/src/components/connect-button.ts b/packages/connect-button/src/components/connect-button.ts index 88fcdae8..4537ff38 100644 --- a/packages/connect-button/src/components/connect-button.ts +++ b/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' diff --git a/packages/connect-button/src/stories/blur-header.stories.ts b/packages/connect-button/src/stories/blur-header.stories.ts index c14d294d..b42f1088 100644 --- a/packages/connect-button/src/stories/blur-header.stories.ts +++ b/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. `, } @@ -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. `, }