From 4b65b78d85210b0b3036b081723ea317fa027901 Mon Sep 17 00:00:00 2001 From: Thomas Drach Date: Wed, 16 Jul 2025 06:34:58 -0700 Subject: [PATCH 1/2] Create a '/ui' route and show each instance of the SIWB and BP buttons --- examples/testapp/package.json | 1 + examples/testapp/src/pages/index.page.tsx | 11 +- examples/testapp/src/pages/ui/index.page.tsx | 242 +++++++++++++++++++ yarn.lock | 3 +- 4 files changed, 255 insertions(+), 2 deletions(-) create mode 100644 examples/testapp/src/pages/ui/index.page.tsx diff --git a/examples/testapp/package.json b/examples/testapp/package.json index d4bc5960f..5203cdcd7 100644 --- a/examples/testapp/package.json +++ b/examples/testapp/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@base-org/account-sdk": "workspace:*", + "@base-org/account-ui": "workspace:*", "@chakra-ui/icons": "^2.1.1", "@chakra-ui/react": "^2.8.0", "@emotion/react": "^11.11.1", diff --git a/examples/testapp/src/pages/index.page.tsx b/examples/testapp/src/pages/index.page.tsx index 9eb4ddc51..40d7734e7 100644 --- a/examples/testapp/src/pages/index.page.tsx +++ b/examples/testapp/src/pages/index.page.tsx @@ -1,4 +1,5 @@ -import { Box, Container, Grid, Heading } from '@chakra-ui/react'; +import { Box, Container, Grid, Heading, HStack, Link, Text } from '@chakra-ui/react'; +import NextLink from 'next/link'; import React, { useEffect } from 'react'; import { EventListenersCard } from '../components/EventListeners/EventListenersCard'; @@ -111,6 +112,14 @@ export default function Home() { /> )} + + + Want to see the UI in action? + + See the UI components demo. + + + ); } diff --git a/examples/testapp/src/pages/ui/index.page.tsx b/examples/testapp/src/pages/ui/index.page.tsx new file mode 100644 index 000000000..a79c7690f --- /dev/null +++ b/examples/testapp/src/pages/ui/index.page.tsx @@ -0,0 +1,242 @@ +import { BasePayButton, SignInWithBaseButton } from '@base-org/account-ui/react'; +import { Box, Container, Grid, Heading, HStack, Link, Text, useColorModeValue, VStack } from '@chakra-ui/react'; +import NextLink from 'next/link'; +import { WIDTH_2XL } from '../../components/Layout'; + +export default function UIDemo() { + const systemBg = useColorModeValue("white", "black"); + const systemFg = useColorModeValue("black", "white"); + + const handleSignInClick = () => { + console.log('Sign in with Base clicked!'); + alert('Sign in with Base clicked! Check console for details.'); + }; + + const handlePayClick = () => { + console.log('Base Pay clicked!'); + alert('Base Pay clicked! Check console for details.'); + }; + + return ( + + {/* Navigation */} + + + + Back to the SDK Playground + + + + + + + + Sign In with Base Button + + + + + + + Light, Centered, Solid + + + + + + + + Light, Centered, Transparent + + + + + + + + Light, Left Aligned, Solid + + + + + + + + Light, Left Aligned, Transparent + + + + + + + + Dark, Centered, Solid + + + + + + + + Dark, Centered, Transparent + + + + + + + + Dark, Left Aligned, Solid + + + + + + + + Dark, Left Aligned, Transparent + + + + + + + + System Theme, Left Aligned + + + + + + + + System Theme, Centered + + + + + + + + {/* Base Pay Button Section */} + + + Base Pay Button + + + + + + + Light Mode + + + + + + + + + Dark Mode + + + + + + + + + System Theme + + + + + + + + {/* Developer Info */} + + + Developer Notes + + + + • Click any button to see console output and test interactions + + + • Buttons support light, dark, and system color schemes + + + • Sign In button has solid and transparent variants + + + • Buttons include hover and active states with smooth transitions + + + • All buttons are fully accessible and keyboard navigable + + + + + + ); +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 542d89cc2..ddef7aa37 100644 --- a/yarn.lock +++ b/yarn.lock @@ -253,7 +253,7 @@ __metadata: languageName: unknown linkType: soft -"@base-org/account-ui@workspace:packages/account-ui": +"@base-org/account-ui@workspace:*, @base-org/account-ui@workspace:packages/account-ui": version: 0.0.0-use.local resolution: "@base-org/account-ui@workspace:packages/account-ui" dependencies: @@ -9766,6 +9766,7 @@ __metadata: resolution: "sdk-playground@workspace:examples/testapp" dependencies: "@base-org/account-sdk": "workspace:*" + "@base-org/account-ui": "workspace:*" "@chakra-ui/icons": "npm:^2.1.1" "@chakra-ui/react": "npm:^2.8.0" "@emotion/react": "npm:^11.11.1" From 494774e099302272a20ccc80e9e0b8019988a53e Mon Sep 17 00:00:00 2001 From: Thomas Drach Date: Wed, 16 Jul 2025 08:15:39 -0700 Subject: [PATCH 2/2] Update button colors for all states, SIWB + BP button --- packages/account-sdk/src/ui/assets/colors.ts | 59 +++++++++---- .../src/frameworks/preact/BasePayButton.scss | 4 - .../frameworks/preact/BasePayButton.test.tsx | 20 ++--- .../src/frameworks/preact/BasePayButton.tsx | 16 ++-- .../preact/SignInWithBaseButton.scss | 20 ++--- .../preact/SignInWithBaseButton.test.tsx | 24 +++--- .../preact/SignInWithBaseButton.tsx | 84 ++++++++++--------- .../preact/mountSignInWithBaseButton.test.ts | 72 +++++++++++----- 8 files changed, 178 insertions(+), 121 deletions(-) diff --git a/packages/account-sdk/src/ui/assets/colors.ts b/packages/account-sdk/src/ui/assets/colors.ts index d8048b98d..902109eb8 100644 --- a/packages/account-sdk/src/ui/assets/colors.ts +++ b/packages/account-sdk/src/ui/assets/colors.ts @@ -2,21 +2,50 @@ export const WHITE = '#FFF'; export const BLACK = '#000'; export const BRAND_BLUE = '#0000FF'; -export const LIGHT_MODE_BOARDER = '#1E2025'; -export const DARK_MODE_BOARDER = '#282B31'; +// SOLID buttons (12 variables) - Sign In with Base +// Light mode solid +export const BUTTON_LIGHT_SOLID = '#FFFFFF'; +export const BUTTON_LIGHT_SOLID_BORDER = '#EEF0F3'; +export const BUTTON_LIGHT_SOLID_HOVER = '#F7F8F9'; +export const BUTTON_LIGHT_SOLID_HOVER_BORDER = '#EEF0F3'; +export const BUTTON_LIGHT_SOLID_ACTIVE = '#EEF0F3'; +export const BUTTON_LIGHT_SOLID_ACTIVE_BORDER = '#EEF0F3'; -// Button hover and active colors -export const BUTTON_HOVER_LIGHT_SOLID = '#2A2A2A'; -export const BUTTON_HOVER_DARK_SOLID = '#F5F5F5'; -export const BUTTON_HOVER_LIGHT_TRANSPARENT = 'rgba(0, 0, 0, 0.02)'; -export const BUTTON_HOVER_DARK_TRANSPARENT = 'rgba(255, 255, 255, 0.05)'; +// Dark mode solid +export const BUTTON_DARK_SOLID = '#0A0B0D'; +export const BUTTON_DARK_SOLID_BORDER = 'transparent'; +export const BUTTON_DARK_SOLID_HOVER = '#1E2025'; +export const BUTTON_DARK_SOLID_HOVER_BORDER = 'transparent'; +export const BUTTON_DARK_SOLID_ACTIVE = '#32353D'; +export const BUTTON_DARK_SOLID_ACTIVE_BORDER = 'transparent'; -export const BUTTON_ACTIVE_LIGHT_SOLID = '#3A3A3A'; -export const BUTTON_ACTIVE_DARK_SOLID = '#EEEEEE'; -export const BUTTON_ACTIVE_LIGHT_TRANSPARENT = 'rgba(0, 0, 0, 0.04)'; -export const BUTTON_ACTIVE_DARK_TRANSPARENT = 'rgba(255, 255, 255, 0.08)'; +// TRANSPARENT buttons (12 variables) - Sign In with Base +// Light mode transparent +export const BUTTON_LIGHT_TRANSPARENT = 'transparent'; +export const BUTTON_LIGHT_TRANSPARENT_BORDER = '#89909E'; +export const BUTTON_LIGHT_TRANSPARENT_HOVER = 'transparent'; +export const BUTTON_LIGHT_TRANSPARENT_HOVER_BORDER = '#464B55'; +export const BUTTON_LIGHT_TRANSPARENT_ACTIVE = 'transparent'; +export const BUTTON_LIGHT_TRANSPARENT_ACTIVE_BORDER = '#0A0B0D'; + +// Dark mode transparent +export const BUTTON_DARK_TRANSPARENT = 'transparent'; +export const BUTTON_DARK_TRANSPARENT_BORDER = '#FFFFFF'; +export const BUTTON_DARK_TRANSPARENT_HOVER = 'transparent'; +export const BUTTON_DARK_TRANSPARENT_HOVER_BORDER = '#C1C6CF'; +export const BUTTON_DARK_TRANSPARENT_ACTIVE = 'transparent'; +export const BUTTON_DARK_TRANSPARENT_ACTIVE_BORDER = '#8A919E'; + +// BASE PAY buttons (8 variables) - Base Pay only +// Light mode Base Pay +export const BASEPAY_LIGHT = '#0000FF'; +export const BASEPAY_LIGHT_HOVER = '#0A0AE6'; +export const BASEPAY_LIGHT_ACTIVE = '#0000D0'; +export const BASEPAY_LIGHT_BORDER = 'none'; + +// Dark mode Base Pay +export const BASEPAY_DARK = '#FFFFFF'; +export const BASEPAY_DARK_HOVER = '#EEF0F3'; +export const BASEPAY_DARK_ACTIVE = '#CED2DB'; +export const BASEPAY_DARK_BORDER = 'none'; -export const BUTTON_HOVER_BORDER_LIGHT = '#1A1A1A'; -export const BUTTON_HOVER_BORDER_DARK = '#FFFFFF'; -export const BUTTON_ACTIVE_BORDER_LIGHT = '#2A2A2A'; -export const BUTTON_ACTIVE_BORDER_DARK = '#FFFFFF'; diff --git a/packages/account-ui/src/frameworks/preact/BasePayButton.scss b/packages/account-ui/src/frameworks/preact/BasePayButton.scss index 5152d7cfb..046a4de1f 100644 --- a/packages/account-ui/src/frameworks/preact/BasePayButton.scss +++ b/packages/account-ui/src/frameworks/preact/BasePayButton.scss @@ -22,16 +22,12 @@ background-color: var(--button-bg-color-hover); color: var(--button-text-color-hover); border-color: var(--button-border-color-hover); - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } &:active { background-color: var(--button-bg-color-active); color: var(--button-text-color-active); border-color: var(--button-border-color-active); - transform: translateY(0); - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } &.-base-ui-pay-button-transparent { diff --git a/packages/account-ui/src/frameworks/preact/BasePayButton.test.tsx b/packages/account-ui/src/frameworks/preact/BasePayButton.test.tsx index 9af610fec..713499a61 100644 --- a/packages/account-ui/src/frameworks/preact/BasePayButton.test.tsx +++ b/packages/account-ui/src/frameworks/preact/BasePayButton.test.tsx @@ -43,8 +43,8 @@ describe('BasePayButton (Preact)', () => { const style = button?.getAttribute('style'); expect(style).toContain('--button-bg-color: #FFF'); - expect(style).toContain('--button-bg-color-hover: #F5F5F5'); - expect(style).toContain('--button-bg-color-active: #EEEEEE'); + expect(style).toContain('--button-bg-color-hover: #EEF0F3'); + expect(style).toContain('--button-bg-color-active: #CED2DB'); }); it('applies light mode styles when colorScheme="light"', () => { @@ -53,8 +53,8 @@ describe('BasePayButton (Preact)', () => { const style = button?.getAttribute('style'); expect(style).toContain('--button-bg-color: #0000FF'); - expect(style).toContain('--button-bg-color-hover: #3333FF'); - expect(style).toContain('--button-bg-color-active: #1A1AFF'); + expect(style).toContain('--button-bg-color-hover: #0A0AE6'); + expect(style).toContain('--button-bg-color-active: #0000D0'); }); it('detects system dark mode when colorScheme="system"', () => { @@ -75,8 +75,8 @@ describe('BasePayButton (Preact)', () => { const style = button?.getAttribute('style'); expect(style).toContain('--button-bg-color: #FFF'); - expect(style).toContain('--button-bg-color-hover: #F5F5F5'); - expect(style).toContain('--button-bg-color-active: #EEEEEE'); + expect(style).toContain('--button-bg-color-hover: #EEF0F3'); + expect(style).toContain('--button-bg-color-active: #CED2DB'); }); it('detects system light mode when colorScheme="system"', () => { @@ -97,8 +97,8 @@ describe('BasePayButton (Preact)', () => { const style = button?.getAttribute('style'); expect(style).toContain('--button-bg-color: #0000FF'); - expect(style).toContain('--button-bg-color-hover: #3333FF'); - expect(style).toContain('--button-bg-color-active: #1A1AFF'); + expect(style).toContain('--button-bg-color-hover: #0A0AE6'); + expect(style).toContain('--button-bg-color-active: #0000D0'); }); it('has correct button CSS classes', () => { @@ -199,7 +199,7 @@ describe('BasePayButton (Preact)', () => { const button = container.querySelector('button'); const style = button?.getAttribute('style'); - expect(style).toContain('--button-bg-color-hover: #3333FF'); + expect(style).toContain('--button-bg-color-hover: #0A0AE6'); }); it('applies active styles correctly', () => { @@ -207,7 +207,7 @@ describe('BasePayButton (Preact)', () => { const button = container.querySelector('button'); const style = button?.getAttribute('style'); - expect(style).toContain('--button-bg-color-active: #1A1AFF'); + expect(style).toContain('--button-bg-color-active: #0000D0'); }); it('uses correct logo for light mode', () => { diff --git a/packages/account-ui/src/frameworks/preact/BasePayButton.tsx b/packages/account-ui/src/frameworks/preact/BasePayButton.tsx index aaf1a18bd..971194227 100644 --- a/packages/account-ui/src/frameworks/preact/BasePayButton.tsx +++ b/packages/account-ui/src/frameworks/preact/BasePayButton.tsx @@ -1,10 +1,12 @@ import { - BRAND_BLUE, - BUTTON_ACTIVE_DARK_SOLID, - BUTTON_HOVER_DARK_SOLID, + BASEPAY_DARK, + BASEPAY_DARK_ACTIVE, + BASEPAY_DARK_HOVER, + BASEPAY_LIGHT, + BASEPAY_LIGHT_ACTIVE, + BASEPAY_LIGHT_HOVER, BasePayLogoColored, BasePayLogoWhite, - WHITE, } from '@base-org/account-sdk/ui-assets'; import { clsx } from 'clsx'; import { BasePayButtonProps } from '../../types.js'; @@ -15,13 +17,13 @@ export const BasePayButton = ({ colorScheme = 'system', onClick }: BasePayButton colorScheme === 'dark' || (colorScheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches); - const backgroundColor = isDarkMode ? WHITE : BRAND_BLUE; + const backgroundColor = isDarkMode ? BASEPAY_DARK : BASEPAY_LIGHT; // Hover states - const hoverBackgroundColor = isDarkMode ? BUTTON_HOVER_DARK_SOLID : '#3333FF'; + const hoverBackgroundColor = isDarkMode ? BASEPAY_DARK_HOVER : BASEPAY_LIGHT_HOVER; // Active states - const activeBackgroundColor = isDarkMode ? BUTTON_ACTIVE_DARK_SOLID : '#1A1AFF'; + const activeBackgroundColor = isDarkMode ? BASEPAY_DARK_ACTIVE : BASEPAY_LIGHT_ACTIVE; return (
diff --git a/packages/account-ui/src/frameworks/preact/SignInWithBaseButton.scss b/packages/account-ui/src/frameworks/preact/SignInWithBaseButton.scss index f027609e3..97ca25eab 100644 --- a/packages/account-ui/src/frameworks/preact/SignInWithBaseButton.scss +++ b/packages/account-ui/src/frameworks/preact/SignInWithBaseButton.scss @@ -13,7 +13,7 @@ font-weight: 400; font-family: 'BaseSans-Regular', sans-serif; cursor: pointer; - border: none; + border: var(--button-border); background-color: var(--button-bg-color); color: var(--button-text-color); transition: all 0.2s ease-in-out; @@ -21,17 +21,13 @@ &:hover { background-color: var(--button-bg-color-hover); color: var(--button-text-color-hover); - border-color: var(--button-border-color-hover); - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + border: var(--button-border-color-hover); } &:active { background-color: var(--button-bg-color-active); color: var(--button-text-color-active); - border-color: var(--button-border-color-active); - transform: translateY(0); - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + border: var(--button-border-color-active); } &.-base-ui-sign-in-button-transparent { @@ -40,24 +36,24 @@ &:hover { background-color: var(--button-bg-color-hover); - border-color: var(--button-border-color-hover); + border: var(--button-border-color-hover); } &:active { background-color: var(--button-bg-color-active); - border-color: var(--button-border-color-active); + border: var(--button-border-color-active); } } &.-base-ui-sign-in-button-solid { - border: none; + border: var(--button-border); &:hover { - border: none; + border: var(--button-border-color-hover); } &:active { - border: none; + border: var(--button-border-color-active); } } diff --git a/packages/account-ui/src/frameworks/preact/SignInWithBaseButton.test.tsx b/packages/account-ui/src/frameworks/preact/SignInWithBaseButton.test.tsx index ecf11060e..dfa30fad4 100644 --- a/packages/account-ui/src/frameworks/preact/SignInWithBaseButton.test.tsx +++ b/packages/account-ui/src/frameworks/preact/SignInWithBaseButton.test.tsx @@ -50,7 +50,7 @@ describe('SignInWithBaseButton (Preact)', () => { const style = button?.getAttribute('style'); expect(style).toContain('--button-bg-color: transparent'); - expect(style).toContain('--button-border: 1px solid #1E2025'); + expect(style).toContain('--button-border: 1px solid #89909E'); }); it('applies dark mode transparent style when variant="transparent" and colorScheme="dark"', () => { @@ -59,7 +59,7 @@ describe('SignInWithBaseButton (Preact)', () => { const style = button?.getAttribute('style'); expect(style).toContain('--button-bg-color: transparent'); - expect(style).toContain('--button-border: 1px solid #282B31'); + expect(style).toContain('--button-border: 1px solid #FFFFFF'); }); it('applies dark mode styles when colorScheme="dark"', () => { @@ -67,8 +67,8 @@ describe('SignInWithBaseButton (Preact)', () => { const button = container.querySelector('button'); const style = button?.getAttribute('style'); - expect(style).toContain('--button-bg-color: #FFF'); - expect(style).toContain('--button-text-color: #000'); + expect(style).toContain('--button-bg-color: #000000'); + expect(style).toContain('--button-text-color: #FFF'); }); it('applies light mode styles when colorScheme="light"', () => { @@ -76,8 +76,8 @@ describe('SignInWithBaseButton (Preact)', () => { const button = container.querySelector('button'); const style = button?.getAttribute('style'); - expect(style).toContain('--button-bg-color: #000'); - expect(style).toContain('--button-text-color: #FFF'); + expect(style).toContain('--button-bg-color: #FFFFFF'); + expect(style).toContain('--button-text-color: #000'); }); it('detects system dark mode when colorScheme="system"', () => { @@ -97,8 +97,8 @@ describe('SignInWithBaseButton (Preact)', () => { const button = container.querySelector('button'); const style = button?.getAttribute('style'); - expect(style).toContain('--button-bg-color: #FFF'); - expect(style).toContain('--button-text-color: #000'); + expect(style).toContain('--button-bg-color: #000000'); + expect(style).toContain('--button-text-color: #FFF'); }); it('has correct button CSS classes', () => { @@ -133,14 +133,14 @@ describe('SignInWithBaseButton (Preact)', () => { const { container } = render(); const path = container.querySelector('path'); - expect(path).toHaveAttribute('fill', '#0000FF'); + expect(path).toHaveAttribute('fill', '#FFF'); }); it('renders BaseLogo with white fill in light mode solid variant', () => { const { container } = render(); const path = container.querySelector('path'); - expect(path).toHaveAttribute('fill', '#FFF'); + expect(path).toHaveAttribute('fill', '#0000FF'); }); it('renders BaseLogo with blue fill in transparent light mode', () => { @@ -174,7 +174,7 @@ describe('SignInWithBaseButton (Preact)', () => { expect(style).toContain('--button-bg-color: transparent'); expect(style).toContain('--button-text-color: #FFF'); - expect(style).toContain('--button-border: 1px solid #282B31'); + expect(style).toContain('--button-border: 1px solid #FFFFFF'); }); it('combines transparent and light mode styles correctly', () => { @@ -186,6 +186,6 @@ describe('SignInWithBaseButton (Preact)', () => { expect(style).toContain('--button-bg-color: transparent'); expect(style).toContain('--button-text-color: #000'); - expect(style).toContain('--button-border: 1px solid #1E2025'); + expect(style).toContain('--button-border: 1px solid #89909E'); }); }); diff --git a/packages/account-ui/src/frameworks/preact/SignInWithBaseButton.tsx b/packages/account-ui/src/frameworks/preact/SignInWithBaseButton.tsx index fe428ff8e..49afef481 100644 --- a/packages/account-ui/src/frameworks/preact/SignInWithBaseButton.tsx +++ b/packages/account-ui/src/frameworks/preact/SignInWithBaseButton.tsx @@ -1,20 +1,30 @@ import { BLACK, - BUTTON_ACTIVE_BORDER_DARK, - BUTTON_ACTIVE_BORDER_LIGHT, - BUTTON_ACTIVE_DARK_SOLID, - BUTTON_ACTIVE_DARK_TRANSPARENT, - BUTTON_ACTIVE_LIGHT_SOLID, - BUTTON_ACTIVE_LIGHT_TRANSPARENT, - BUTTON_HOVER_BORDER_DARK, - BUTTON_HOVER_BORDER_LIGHT, - BUTTON_HOVER_DARK_SOLID, - BUTTON_HOVER_DARK_TRANSPARENT, - BUTTON_HOVER_LIGHT_SOLID, - BUTTON_HOVER_LIGHT_TRANSPARENT, + BUTTON_DARK_SOLID, + BUTTON_DARK_SOLID_ACTIVE, + BUTTON_DARK_SOLID_ACTIVE_BORDER, + BUTTON_DARK_SOLID_BORDER, + BUTTON_DARK_SOLID_HOVER, + BUTTON_DARK_SOLID_HOVER_BORDER, + BUTTON_DARK_TRANSPARENT, + BUTTON_DARK_TRANSPARENT_ACTIVE, + BUTTON_DARK_TRANSPARENT_ACTIVE_BORDER, + BUTTON_DARK_TRANSPARENT_BORDER, + BUTTON_DARK_TRANSPARENT_HOVER, + BUTTON_DARK_TRANSPARENT_HOVER_BORDER, + BUTTON_LIGHT_SOLID, + BUTTON_LIGHT_SOLID_ACTIVE, + BUTTON_LIGHT_SOLID_ACTIVE_BORDER, + BUTTON_LIGHT_SOLID_BORDER, + BUTTON_LIGHT_SOLID_HOVER, + BUTTON_LIGHT_SOLID_HOVER_BORDER, + BUTTON_LIGHT_TRANSPARENT, + BUTTON_LIGHT_TRANSPARENT_ACTIVE, + BUTTON_LIGHT_TRANSPARENT_ACTIVE_BORDER, + BUTTON_LIGHT_TRANSPARENT_BORDER, + BUTTON_LIGHT_TRANSPARENT_HOVER, + BUTTON_LIGHT_TRANSPARENT_HOVER_BORDER, BaseLogo, - DARK_MODE_BOARDER, - LIGHT_MODE_BOARDER, WHITE, } from '@base-org/account-sdk/ui-assets'; import { SignInWithBaseButtonProps } from '../../types.js'; @@ -35,56 +45,52 @@ export const SignInWithBaseButton = ({ colorScheme === 'dark' || (colorScheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches); + // Updated color logic for solid variant (inverted) const foregroundColor = - variant === 'transparent' ? (isDarkMode ? WHITE : BLACK) : isDarkMode ? BLACK : WHITE; + variant === 'transparent' + ? (isDarkMode ? WHITE : BLACK) + : isDarkMode ? WHITE : BLACK; // Inverted: dark mode = white text, light mode = black text - const backgroundColor = variant === 'transparent' ? 'transparent' : isDarkMode ? WHITE : BLACK; + const backgroundColor = + variant === 'transparent' + ? isDarkMode ? BUTTON_DARK_TRANSPARENT : BUTTON_LIGHT_TRANSPARENT + : isDarkMode ? BUTTON_DARK_SOLID : BUTTON_LIGHT_SOLID; // Inverted: dark mode = black bg, light mode = white bg const borderColor = variant === 'transparent' - ? `1px solid ${isDarkMode ? DARK_MODE_BOARDER : LIGHT_MODE_BOARDER}` - : 'none'; + ? `1px solid ${isDarkMode ? BUTTON_DARK_TRANSPARENT_BORDER : BUTTON_LIGHT_TRANSPARENT_BORDER}` + : `1px solid ${isDarkMode ? BUTTON_DARK_SOLID_BORDER : BUTTON_LIGHT_SOLID_BORDER}`; const logoFill = - variant === 'transparent' ? (isDarkMode ? 'white' : 'blue') : isDarkMode ? 'blue' : 'white'; + variant === 'transparent' + ? (isDarkMode ? 'white' : 'blue') + : isDarkMode ? 'white' : 'blue'; // Inverted: dark mode = white logo, light mode = blue logo // Hover states const hoverBackgroundColor = variant === 'transparent' - ? isDarkMode - ? BUTTON_HOVER_DARK_TRANSPARENT - : BUTTON_HOVER_LIGHT_TRANSPARENT - : isDarkMode - ? BUTTON_HOVER_DARK_SOLID - : BUTTON_HOVER_LIGHT_SOLID; + ? isDarkMode ? BUTTON_DARK_TRANSPARENT_HOVER : BUTTON_LIGHT_TRANSPARENT_HOVER + : isDarkMode ? BUTTON_DARK_SOLID_HOVER : BUTTON_LIGHT_SOLID_HOVER; const hoverForegroundColor = variant === 'transparent' ? foregroundColor : foregroundColor; const hoverBorderColor = variant === 'transparent' - ? isDarkMode - ? BUTTON_HOVER_BORDER_DARK - : BUTTON_HOVER_BORDER_LIGHT - : 'none'; + ? `1px solid ${isDarkMode ? BUTTON_DARK_TRANSPARENT_HOVER_BORDER : BUTTON_LIGHT_TRANSPARENT_HOVER_BORDER}` + : `1px solid ${isDarkMode ? BUTTON_DARK_SOLID_HOVER_BORDER : BUTTON_LIGHT_SOLID_HOVER_BORDER}`; // Active states const activeBackgroundColor = variant === 'transparent' - ? isDarkMode - ? BUTTON_ACTIVE_DARK_TRANSPARENT - : BUTTON_ACTIVE_LIGHT_TRANSPARENT - : isDarkMode - ? BUTTON_ACTIVE_DARK_SOLID - : BUTTON_ACTIVE_LIGHT_SOLID; + ? isDarkMode ? BUTTON_DARK_TRANSPARENT_ACTIVE : BUTTON_LIGHT_TRANSPARENT_ACTIVE + : isDarkMode ? BUTTON_DARK_SOLID_ACTIVE : BUTTON_LIGHT_SOLID_ACTIVE; const activeForegroundColor = variant === 'transparent' ? foregroundColor : foregroundColor; const activeBorderColor = variant === 'transparent' - ? isDarkMode - ? BUTTON_ACTIVE_BORDER_DARK - : BUTTON_ACTIVE_BORDER_LIGHT - : 'none'; + ? `1px solid ${isDarkMode ? BUTTON_DARK_TRANSPARENT_ACTIVE_BORDER : BUTTON_LIGHT_TRANSPARENT_ACTIVE_BORDER}` + : `1px solid ${isDarkMode ? BUTTON_DARK_SOLID_ACTIVE_BORDER : BUTTON_LIGHT_SOLID_ACTIVE_BORDER}`; return (