fix(offerwall): button contrast adjustment (#621)

Co-authored-by: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>

Author: kjmitchelljr

components/src/offerwall/components/install-required/install-required.css

@@ -61,8 +61,10 @@ h2 {
   border-radius: var(--Radius-Moderate-rounding);
 
   background: var(--accent-color);
+  /* contrast-color() is unreliable in Chrome shadow DOM; approximate with OKLCH:
+     https://css-tricks.com/approximating-contrast-color-with-other-css-features/ */
   color: white;
-  color: contrast-color(var(--accent-color));
+  color: oklch(from var(--accent-color) round(1.21 - L) 0 0);
 }
 
 .step-icon {

components/src/offerwall/components/install-required/install-required.ts

@@ -6,7 +6,6 @@ import iconWallet from '@c/assets/icon_wallet.svg?raw'
 import iconClose from '@c/assets/icon_x_close.svg?raw'
 import { PoweredByInterledger } from '@c/shared/powered-by-interledger'
 import { WebMonetizationHeader } from '@c/shared/web-monetization-header'
-import { getContrastColor } from '@c/utils'
 import { getExtensionHref } from '@shared/utils/extension'
 import styles from './install-required.css?raw'
 import styleTokens from '../../vars.css?raw'
@@ -90,13 +89,6 @@ export class InstallRequired extends LitElement {
     `
   }
 
-  firstUpdated(): void {
-    if (!CSS.supports('color: contrast-color(black)')) {
-      const el = this.renderRoot.querySelector<HTMLAnchorElement>('a.button')!
-      el.style.color = getContrastColor(getComputedStyle(el).backgroundColor)
-    }
-  }
-
   get extensionUrl(): string {
     return getExtensionHref('offerwall')
   }