Border Radius
Radius system powered by HeroUI v3 design tokens
Radius System
StockFind uses the HeroUI v3 design token system. The --radius token is a base unit that generates a full scale via @theme.
Cards & Surfaces
Light: 12px | Dark: 30px
rounded-3xl (3x base)--field-radiusHeroUI v3 Radius Scale
The --radius base unit generates a full scale of radius tokens via HeroUI's @theme:
Light Mode (--radius: 0.25rem / 4px)
| Token | Multiplier | Value | Usage |
|---|---|---|---|
--radius-sm | 0.5x | 2px | Small chips, badges |
--radius-md | 0.75x | 3px | Subtle rounding |
--radius-lg | 1x | 4px | Buttons, small elements |
--radius-xl | 1.5x | 6px | Containers |
--radius-2xl | 2x | 8px | Larger containers |
--radius-3xl | 3x | 12px | Cards (HeroUI default) |
--field-radius | — | 4px | Form inputs |
Dark Mode (--radius: 0.625rem / 10px)
| Token | Multiplier | Value | Usage |
|---|---|---|---|
--radius-sm | 0.5x | 5px | Small chips, badges |
--radius-md | 0.75x | 7.5px | Subtle rounding |
--radius-lg | 1x | 10px | Buttons, small elements |
--radius-xl | 1.5x | 15px | Containers |
--radius-2xl | 2x | 20px | Larger containers |
--radius-3xl | 3x | 30px | Cards (HeroUI default) |
--field-radius | 1.5x | 15px | Form inputs |
CSS Variables
/* Light mode */
:root {
--radius: 0.25rem;
--field-radius: 0.25rem;
}
/* Dark mode */
.dark {
--radius: 0.625rem;
--field-radius: calc(var(--radius) * 1.5);
}Theme Location
The theme is defined in @stockfind/theme (packages/theme/src/stockfind.css) and shared across all apps via:
@import "@stockfind/theme/stockfind.css" layer(theme);Usage
Cards & Surfaces
// Cards use HeroUI default rounded-3xl (3x base)
<Card>...</Card>
// Pill buttons for CTAs
<Button className="rounded-full">Get Started</Button>Form Inputs
// Inputs use --field-radius automatically
<Input placeholder="Search stocks..." />
<Select>...</Select>
<TextArea />