Skip to content

[TRIVIAL] Add '/ui' route to testapp + update button colors #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[TRIVIAL] Add '/ui' route to testapp + update button colors #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4b65b78
Create a '/ui' route and show each instance of the SIWB and BP buttons
Jul 16, 2025
494774e
Update button colors for all states, SIWB + BP button
Jul 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions examples/testapp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
11 changes: 10 additions & 1 deletion examples/testapp/src/pages/index.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -111,6 +112,14 @@ export default function Home() {
/>
</>
)}
<Box mt={6} p={4} borderWidth={1} borderRadius="lg" bg="blue.50">
<HStack spacing={4} align="center">
<Text color="gray.900">Want to see the UI in action?</Text>
<Link as={NextLink} href="/ui" color="blue.600" fontWeight="medium" _hover={{ color: "blue.800", textDecoration: "underline" }}>
See the UI components demo.
</Link>
</HStack>
</Box>
</Container>
);
}
242 changes: 242 additions & 0 deletions examples/testapp/src/pages/ui/index.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Container maxW={WIDTH_2XL}>
{/* Navigation */}
<Box mb={6} p={4} borderWidth={1} borderRadius="lg" bg="blue.50">
<HStack spacing={4} align="center">
<Link as={NextLink} href="/" color="blue.600" fontWeight="medium" _hover={{ color: "blue.800", textDecoration: "underline" }}>
Back to the SDK Playground
</Link>
</HStack>
</Box>

<VStack spacing={8} align="stretch">
<Box>
<Heading size="lg" mb={6} color="gray.700">
Sign In with Base Button
</Heading>

<Grid templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)', lg: 'repeat(2, 1fr)' }} gap={0}>
<Box p={24} borderWidth={1} bg="#fafafa">
<Box maxW="375px" align="left" m="auto">
<Text fontWeight="semibold" mb={4} fontSize="sm" color="gray.600">
Light, Centered, Solid
</Text>
<SignInWithBaseButton
onClick={handleSignInClick}
variant="solid"
colorScheme="light"
align="center"
/>
</Box>
</Box>
<Box p={24} borderWidth={1} bg="#ffffff">
<Box maxW="375px" align="left" m="auto">
<Text fontWeight="semibold" mb={3} fontSize="sm" color="gray.600">
Light, Centered, Transparent
</Text>
<SignInWithBaseButton
onClick={handleSignInClick}
variant="transparent"
colorScheme="light"
align="center"
/>
</Box>
</Box>
<Box p={24} borderWidth={1} bg="#fafafa">
<Box maxW="375px" align="left" m="auto">
<Text fontWeight="semibold" mb={3} fontSize="sm" color="gray.600">
Light, Left Aligned, Solid
</Text>
<SignInWithBaseButton
onClick={handleSignInClick}
variant="solid"
colorScheme="light"
align="left"
/>
</Box>
</Box>
<Box p={24} borderWidth={1} bg="#ffffff">
<Box maxW="375px" align="left" m="auto">
<Text fontWeight="semibold" mb={3} fontSize="sm" color="gray.600">
Light, Left Aligned, Transparent
</Text>
<SignInWithBaseButton
onClick={handleSignInClick}
variant="transparent"
colorScheme="light"
align="left"
/>
</Box>
</Box>
<Box p={24} borderWidth={1} bg="#393939">
<Box maxW="375px" align="left" m="auto">
<Text fontWeight="semibold" mb={3} fontSize="sm" color="#ffffff">
Dark, Centered, Solid
</Text>
<SignInWithBaseButton
onClick={handleSignInClick}
variant="solid"
colorScheme="dark"
align="center"
/>
</Box>
</Box>
<Box p={24} borderWidth={1} bg="#000000">
<Box maxW="375px" align="left" m="auto">
<Text fontWeight="semibold" mb={3} fontSize="sm" color="#ffffff">
Dark, Centered, Transparent
</Text>
<SignInWithBaseButton
onClick={handleSignInClick}
variant="transparent"
colorScheme="dark"
align="center"
/>
</Box>
</Box>
<Box p={24} borderWidth={1} bg="#393939">
<Box maxW="375px" align="left" m="auto">
<Text fontWeight="semibold" mb={3} fontSize="sm" color="#ffffff">
Dark, Left Aligned, Solid
</Text>
<SignInWithBaseButton
onClick={handleSignInClick}
variant="solid"
colorScheme="dark"
align="left"
/>
</Box>
</Box>
<Box p={24} borderWidth={1} bg="#000000">
<Box maxW="375px" align="left" m="auto">
<Text fontWeight="semibold" mb={3} fontSize="sm" color="#ffffff">
Dark, Left Aligned, Transparent
</Text>
<SignInWithBaseButton
onClick={handleSignInClick}
variant="transparent"
colorScheme="dark"
align="left"
/>
</Box>
</Box>
<Box p={24} borderWidth={1} bg={systemBg}>
<Box maxW="375px" align="left" m="auto">
<Text fontWeight="semibold" mb={3} fontSize="sm" color="gray.600">
System Theme, Left Aligned
</Text>
<SignInWithBaseButton
onClick={handleSignInClick}
variant="solid"
colorScheme="system"
align="left"
/>
</Box>
</Box>
<Box p={24} borderWidth={1} bg={systemBg}>
<Box maxW="375px" align="left" m="auto">
<Text fontWeight="semibold" mb={3} fontSize="sm" color="gray.600">
System Theme, Centered
</Text>
<SignInWithBaseButton
onClick={handleSignInClick}
variant="solid"
colorScheme="system"
align="center"
/>
</Box>
</Box>
</Grid>
</Box>

{/* Base Pay Button Section */}
<Box>
<Heading size="lg" mb={6} color="gray.700">
Base Pay Button
</Heading>

<Grid templateColumns={{ base: '1fr', md: 'repeat(3, 1fr)' }}>
<Box p={24} borderWidth={1} bg="#ffffff">
<Box maxW="375px" align="left" m="auto">
<Text fontWeight="semibold" mb={3} fontSize="sm" color="gray.600">
Light Mode
</Text>
<BasePayButton
onClick={handlePayClick}
colorScheme="light"
/>
</Box>
</Box>

<Box p={24} borderWidth={1} bg="#000000">
<Box maxW="375px" align="left" m="auto">
<Text fontWeight="semibold" mb={3} fontSize="sm" color="#ffffff">
Dark Mode
</Text>
<BasePayButton
onClick={handlePayClick}
colorScheme="dark"
/>
</Box>
</Box>

<Box p={24} borderWidth={1} bg={systemBg}>
<Box maxW="375px" align="left" m="auto">
<Text fontWeight="semibold" mb={3} fontSize="sm" color={systemFg}>
System Theme
</Text>
<BasePayButton
onClick={handlePayClick}
colorScheme="system"
/>
</Box>
</Box>
</Grid>
</Box>

{/* Developer Info */}
<Box p={6} borderWidth={1} borderRadius="lg" bg="gray.50" mb={24}>
<Heading size="md" mb={4} color="gray.700">
Developer Notes
</Heading>
<VStack align="start" spacing={2}>
<Text fontSize="sm">
• Click any button to see console output and test interactions
</Text>
<Text fontSize="sm">
• Buttons support light, dark, and system color schemes
</Text>
<Text fontSize="sm">
• Sign In button has solid and transparent variants
</Text>
<Text fontSize="sm">
• Buttons include hover and active states with smooth transitions
</Text>
<Text fontSize="sm">
• All buttons are fully accessible and keyboard navigable
</Text>
</VStack>
</Box>
</VStack>
</Container>
);
}
59 changes: 44 additions & 15 deletions packages/account-sdk/src/ui/assets/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
4 changes: 0 additions & 4 deletions packages/account-ui/src/frameworks/preact/BasePayButton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Loading
Loading