Skip to content

fix: dark input focus rings #114

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
barvian wants to merge 2 commits into
base: max/dashboard-fonts
Choose a base branch
from
Open

fix: dark input focus rings #114

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
2e6b9a0
text-trim sidebar nav items
barvian Aug 28, 2026
1f0fcdf
dark input focus rings
barvian Aug 28, 2026
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
34 changes: 15 additions & 19 deletions app/components/AppShell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import { AnimatedBaseLogo, BaseMark } from './ui/AnimatedBaseLogo';
import { Breadcrumb } from './ui/Breadcrumb';
import { cn } from './ui/cn';
import { AnimatedArrowIcon, CloseIcon } from './ui/icons';
import { Text } from './ui/Text';
import { Text, textVariantClasses } from './ui/Text';

const SIDEBAR_WIDTH = 248;
/** Matches base.org's nav logo size, which the animation timings are tuned for. */
Expand Down Expand Up @@ -84,7 +84,6 @@ const styles: Record<string, CSSProperties> = {
gap: 10,
padding: '9px 10px',
borderRadius: 8,
fontSize: 14,
},
navIcon: { display: 'inline-flex', width: 20, height: 20 },
soon: {
Expand Down Expand Up @@ -293,14 +292,7 @@ function NavRow({ icon, label, href, active, enabled, hasChildren, onNavigate }:
<NavGlyph name={icon} />
</span>
)}
<Text
as="span"
variant="label.medium"
tone="inherit"
className="font-[500]"
>
{label}
</Text>
{label}
{!enabled && <span style={styles.soon}>Soon</span>}
{hasChildren && (
<span style={{ marginLeft: 'auto', color: 'var(--bds-gray-50)' }}>
Expand All @@ -318,13 +310,13 @@ function NavRow({ icon, label, href, active, enabled, hasChildren, onNavigate }:
};

if (!enabled) {
return <div style={rowStyle}>{content}</div>;
return <div className={NAV_LABEL} style={rowStyle}>{content}</div>;
}

return (
<Link
href={href}
className={`${hasChildren ? 'group ' : ''}nav-row-hover${active ? ' nav-row-active' : ''} ${NAV_FOCUS_RING}`}
className={`${hasChildren ? 'group ' : ''}nav-row-hover${active ? ' nav-row-active' : ''} ${NAV_LABEL} ${NAV_FOCUS_RING}`}
style={rowStyle}
onClick={(event) => {
if (opensInNewTab(event)) return;
Expand Down Expand Up @@ -385,8 +377,12 @@ const APP_BANNER_HEIGHT = '2.25rem';
// slipped through), so it just has to be longer than a slow route.
const PENDING_PATH_TIMEOUT_MS = 5000;

const TEXT_TRIM = '[text-box-trim:trim-both] [text-box-edge:cap_alphabetic]';

const NAV_LABEL = `${textVariantClasses['label.medium']} box-content min-h-[1lh] ${TEXT_TRIM}`;

const SIDEBAR_FOOTER_LINK =
'group outline-none text-bds-gray-50 transition-colors duration-150 hover:text-bds-gray-80';
`group outline-none ${NAV_LABEL} text-bds-gray-50 transition-colors duration-150 hover:text-bds-gray-80`;

const SIDEBAR_FOOTER_LINK_LABEL =
'inline-flex items-center gap-2.5 rounded-lg group-focus-visible:outline group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-brand-blue';
Expand Down Expand Up @@ -515,7 +511,7 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC
>
<Link
href="/"
className={`nav-header-hover group ${NAV_FOCUS_RING}`}
className={`nav-header-hover group ${NAV_LABEL} ${NAV_FOCUS_RING}`}
style={{ ...styles.navLink, display: 'flex', alignItems: 'center', padding: '9px 6px 9px 2px', marginBottom: 2, color: 'var(--bds-gray-50)' }}
onClick={(event) => {
if (opensInNewTab(event)) return;
Expand Down Expand Up @@ -543,7 +539,7 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC
className="transition-[stroke-dashoffset] duration-200 ease-out group-hover:[stroke-dashoffset:0]"
/>
</svg>
<Text as="span" variant="label.medium" className="font-[500]" style={{ flex: 1, textAlign: 'center', paddingRight: 16 }}>{activeParent.label}</Text>
<span className="flex-1 text-center pr-4">{activeParent.label}</span>
</Link>
<nav style={styles.nav}>
{activeParent.children!.map((child) => {
Expand Down Expand Up @@ -590,7 +586,7 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC
<path d="M2.25 12h4.5l2.25-6 4.5 12 2.25-6h6.75" />
</svg>
</span>
<Text as="span" variant="label.medium" tone="inherit" className="font-[500]">Status</Text>
Status
</span>
</a>
<a href="https://base.org/discord" target="_blank" rel="noreferrer" className={SIDEBAR_FOOTER_LINK} style={styles.footerLink}>
Expand All @@ -600,7 +596,7 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC
<path d="M216.856 16.597C200.285 8.843 182.566 3.208 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046-19.692-2.961-39.203-2.961-58.533 0-1.832-4.401-4.55-9.933-6.846-14.046C73.353 3.208 55.613 8.864 39.042 16.638 5.618 67.147-3.443 116.401 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193 5.215-7.177 9.866-14.807 13.873-22.848-7.631-2.9-14.94-6.478-21.846-10.632 1.832-1.357 3.624-2.776 5.356-4.237 42.122 19.702 87.89 19.702 129.51 0 1.751 1.46 3.543 2.88 5.355 4.237-6.926 4.174-14.255 7.753-21.886 10.653 4.006 8.02 8.638 15.67 13.873 22.848 21.142-6.58 42.646-16.637 64.815-33.213 5.316-56.288-9.08-105.09-38.056-148.36ZM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2.02 14.375-10.148 26.18-23.015 26.18Zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2 0 14.375-10.148 26.18-23.015 26.18Z" />
</svg>
</span>
<Text as="span" variant="label.medium" tone="inherit" className="font-[500]">Support</Text>
Support
</span>
</a>
<a href="https://docs.base.org" target="_blank" rel="noreferrer" className={SIDEBAR_FOOTER_LINK} style={styles.footerLink}>
Expand All @@ -610,7 +606,7 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC
<path d="M15 15H19.5M15 25H19.5M15 20H16M24 15L25 15M24 25H25M21 20H25M13 31H27C29.2091 31 31 29.2091 31 27V13C31 10.7909 29.2091 9 27 9H13C10.7909 9 9 10.7909 9 13V27C9 29.2091 10.7909 31 13 31Z" />
</svg>
</span>
<Text as="span" variant="label.medium" tone="inherit" className="font-[500]">Docs</Text>
Docs
</span>
</a>
<div style={styles.footerLastRow}>
Expand All @@ -621,7 +617,7 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC
<path d="M12.75 19.5V18.75C12.75 16.76 11.96 14.85 10.55 13.45C9.15 12.04 7.24 11.25 5.25 11.25H4.5M4.5 4.5H5.25C13.12 4.5 19.5 10.88 19.5 18.75V19.5M6 18.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
</svg>
</span>
<Text as="span" variant="label.medium" tone="inherit" className="font-[500]">Blog</Text>
Blog
</span>
</a>
{/* `role="switch"` rather than a plain button: the control reports a state
Expand Down
4 changes: 2 additions & 2 deletions app/internal-explorer/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ function SearchBar({ chain, onError }: { chain: ExplorerChain; onError: (error:
spellCheck={false}
autoComplete="off"
className={cn(
'w-full rounded-full border border-bds-gray-10 bg-bds-gray-0 py-3 pl-9 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-bds-blue-40',
'w-full rounded-full border border-bds-gray-10 bg-bds-gray-0 py-3 pl-9 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-white/40',
searchHash.trim() ? 'pr-24' : 'pr-3.5',
)}
/>
Expand Down Expand Up @@ -499,7 +499,7 @@ function RejectedTransactionsTab({ chain }: { chain: ExplorerChain }) {
});

const inputClass =
'rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-1.5 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-bds-blue-40';
'rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-1.5 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-white/40';

return (
<section className="flex flex-col gap-4">
Expand Down
2 changes: 1 addition & 1 deletion app/upgrades/changelog/ChangelogClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ export function ChangelogClient() {
onChange={handleQueryChange}
placeholder="Search by title, EIP, or summary keyword"
aria-label="Search changes"
className="h-[34px] min-w-[min(100%,14rem)] flex-1 rounded-full border border-bds-gray-10 bg-background px-4 text-[14px] text-foreground outline-none placeholder:text-bds-gray-50"
className="h-[34px] min-w-[min(100%,14rem)] flex-1 rounded-full border border-bds-gray-10 bg-background px-4 text-[14px] text-foreground outline-none transition-colors placeholder:text-bds-gray-50 focus:border-foreground dark:border-white/10 dark:focus:border-white/40"
/>
</div>

Expand Down
2 changes: 1 addition & 1 deletion app/vibenet/components/ExplorerSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export function ExplorerSearch() {
spellCheck={false}
autoComplete="off"
className={cn(
'w-full rounded-full border border-bds-gray-10 bg-bds-gray-0 py-3 pl-9 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-bds-blue-40',
'w-full rounded-full border border-bds-gray-10 bg-bds-gray-0 py-3 pl-9 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-white/40',
hasQuery ? 'pr-20' : 'pr-3.5',
)}
/>
Expand Down
2 changes: 1 addition & 1 deletion app/vibenet/demos/account/components/CreateAccountModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ export function CreateAccountModal({ open, onClose }: CreateAccountModalProps) {
submit();
}
}}
className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] font-normal outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-bds-blue-40"
className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] font-normal outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40"
/>
</label>

Expand Down
2 changes: 1 addition & 1 deletion app/vibenet/demos/account/components/SessionKeyEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import { useAccountEngine } from '../useAccountEngine';

const ADDR_RE = /^0x[0-9a-fA-F]{40}$/;
const INPUT_CLS =
'w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-2 text-[13px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-bds-blue-40';
'w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-2 text-[13px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40';
const CHIP_CLS =
'rounded-full border border-bds-gray-10 px-2.5 py-1 text-[12px] text-bds-gray-60 transition-colors hover:border-bds-gray-15 dark:border-white/10 dark:text-bds-gray-40';
const CHIP_ON = 'border-base-blue bg-bds-blue-0 text-base-blue';
Expand Down
4 changes: 2 additions & 2 deletions app/vibenet/demos/account/components/TransactionModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ import { formatTokenAmount, KIND_LABEL, short, type WalletSigner } from '../shar
import { conciseError, EstimateRevertedError, isSeqMismatch, TxPendingError, useAccountEngine } from '../useAccountEngine';

const INPUT_CLS =
'w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-2 text-[13px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-bds-blue-40';
'w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-2 text-[13px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40';

export type TransactPreset = { calls: CallRow[]; gasMode?: 'eth' | 'free' | 'usdv'; metadata?: string };
/** Apply the staged owner change, or a specific session key's change. */
Expand Down Expand Up @@ -812,7 +812,7 @@ export function TransactionModal({ onClose, preset, applyTarget }: TransactionMo
spellCheck={false}
placeholder="Optional note / app data — e.g. invoice #4242"
onChange={(e) => setMetaField(e.target.value)}
className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-bds-blue-40"
className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40"
/>
{metadataHex ? (
<p className="text-[12px] text-bds-gray-60 dark:text-bds-gray-40">
Expand Down
2 changes: 1 addition & 1 deletion app/vibenet/explorer/address/[addr]/OwnedAccountView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ import { ActivityTable } from './ActivityTable';
import { AssetsCard } from './AssetsCard';

const INPUT_CLS =
'w-full rounded-lg border border-bds-gray-10 bg-background px-3.5 py-2.5 text-[14px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-bds-blue-40';
'w-full rounded-lg border border-bds-gray-10 bg-background px-3.5 py-2.5 text-[14px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40';

const SECTIONS: ShellSection[] = [
{ id: 'overview', label: 'Overview' },
Expand Down
2 changes: 1 addition & 1 deletion app/vibenet/faucet/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,7 @@ export default function FaucetPage() {
placeholder="0x…"
spellCheck={false}
autoComplete="off"
className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] font-normal text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-bds-blue-40"
className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] font-normal text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-white/40"
/>
</label>
<div className="flex flex-wrap gap-3">
Expand Down
Loading