diff --git a/LICENSE b/LICENSE index fb9304d..3865f3d 100644 --- a/LICENSE +++ b/LICENSE @@ -3,7 +3,7 @@ MIT License Copyright (c) 2026 Base NOTE: Some files in this repository are excluded from this license. See NOTICE -for the exceptions, which include the Base Sans brand typefaces under +for the exceptions, which include the Google Sans Flex typeface under public/fonts/, and for third-party attribution. Permission is hereby granted, free of charge, to any person obtaining a copy diff --git a/NOTICE b/NOTICE index 29d8a39..be1abfb 100644 --- a/NOTICE +++ b/NOTICE @@ -6,19 +6,16 @@ exceptions listed below. Where this file and LICENSE disagree, this file governs for the files it names. -Base Sans and Base Sans Mono (brand typefaces) — NOT MIT licensed ------------------------------------------------------------------ +Google Sans Flex (UI typeface) — NOT MIT licensed +------------------------------------------------- - public/fonts/BaseSans/* - public/fonts/BaseSansMono/* + public/fonts/GoogleSansFlex/* -These typefaces are Base's proprietary brand assets. Copyright (c) Base. All -rights reserved. - -They are included in this repository solely so that this application renders -with correct branding. They are NOT covered by the MIT license in LICENSE, and -no license to them is granted by it. You may not copy, redistribute, embed, -modify, sublicense, or otherwise use these font files outside of this project. +This typeface is a proprietary Google font, included here solely so that this +application renders with the same UI sans as the Base dashboard. It is NOT +covered by the MIT license in LICENSE, and no license to it is granted by it. +You may not copy, redistribute, embed, modify, sublicense, or otherwise use +these font files outside of this project. If you fork this repository or reuse its code, remove these files and substitute your own typeface. Note that they are loaded via next/font/local in diff --git a/README.md b/README.md index d0aefdb..478bdf2 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ outside this repo at the org/platform level. - `vibenet/` — devnet explorer and faucet - `components/` — shared shell and UI primitives - `theme.ts` / `spectrum.ts` / `globals.css` — BDS design tokens -- `public/` — Base Sans fonts and images +- `public/` — Google Sans Flex, Doto, and images ## Environment diff --git a/app/components/AppShell.tsx b/app/components/AppShell.tsx index e47b283..7da2cce 100644 --- a/app/components/AppShell.tsx +++ b/app/components/AppShell.tsx @@ -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. */ @@ -84,7 +84,6 @@ const styles: Record = { gap: 10, padding: '9px 10px', borderRadius: 8, - fontSize: 14, }, navIcon: { display: 'inline-flex', width: 20, height: 20 }, soon: { @@ -172,6 +171,13 @@ const styles: Record = { contentInner: { width: '100%', maxWidth: 1280, margin: '0 auto', padding: '24px 28px 80px', flexGrow: 1, flexShrink: 0, display: 'flex', flexDirection: 'column' as const, minWidth: 0 }, }; +const TEXT_TRIM = '[text-box-trim:trim-both] [text-box-edge:cap_alphabetic]'; + +const NAV_LABEL = `${textVariantClasses['label.medium']} box-content min-h-[1lh]`; + +const NAV_FOCUS_RING = + 'outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-blue'; + function NavGlyph({ name }: NavGlyphProps) { const common = { width: 20, @@ -293,7 +299,7 @@ function NavRow({ icon, label, href, active, enabled, hasChildren, onNavigate }: )} - {label} + {label} {!enabled && Soon} {hasChildren && ( @@ -307,18 +313,17 @@ function NavRow({ icon, label, href, active, enabled, hasChildren, onNavigate }: ...styles.navRow, ...styles.navLink, color, - fontWeight: active ? 500 : 400, cursor: enabled ? 'pointer' : 'default', }; if (!enabled) { - return
{content}
; + return
{content}
; } return ( { if (opensInNewTab(event)) return; @@ -380,14 +385,11 @@ const APP_BANNER_HEIGHT = '2.25rem'; const PENDING_PATH_TIMEOUT_MS = 5000; 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'; -const NAV_FOCUS_RING = - 'outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-blue'; - // Track and thumb. Shared with the `:not(...)` list in disableAnimation so the // page-wide no-transition stamp cannot override the 180ms slide. const THEME_SWITCH_ANIM = 'theme-switch-anim'; @@ -509,7 +511,7 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC > { if (opensInNewTab(event)) return; @@ -537,7 +539,9 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand }: SidebarC className="transition-[stroke-dashoffset] duration-200 ease-out group-hover:[stroke-dashoffset:0]" /> - {activeParent.label} + + {activeParent.label} +