Skip to content

unify card styles #2886

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

Merged
felixkrrr merged 4 commits into from
Apr 30, 2026
Merged

unify card styles #2886

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d44af58
unify card styles
felixkrrr Apr 30, 2026
2fbea26
Fix ChipCard transition merge and FeaturedCustomers group-hover colli…
felixkrrr Apr 30, 2026
f5cb1a8
fix button sizes
felixkrrr Apr 30, 2026
eee2219
fix(ui): scope CornerBox hoverStripes group for Tailwind v4
felixkrrr Apr 30, 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
8 changes: 4 additions & 4 deletions app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ export default function NotFound() {
The page you were looking for does not exist.
</p>
</div>
<Button href="/">
Go back home
</Button>
<div className="mt-4">
<div className="flex flex-row flex-wrap gap-3 justify-center items-center">
<Button size="default" href="/">
Go back home
</Button>
<BrokenLinkIssue />
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions components/BrokenLinkIssue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export function BrokenLinkIssue() {
return (
<Button
variant="secondary"
size="default"
href={href}
target="_blank"
rel="noopener noreferrer"
Expand Down
2 changes: 1 addition & 1 deletion components/ContactSalesForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -315,7 +315,7 @@ export function ContactSalesForm() {
</div>
)}

<Button type="submit" className="w-full" disabled={isSubmitting}>
<Button type="submit" size="default" className="w-full" disabled={isSubmitting}>
{isSubmitting ? "Submitting..." : "Submit"}
</Button>
</form>
Expand Down
2 changes: 1 addition & 1 deletion components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const Header = ({
{buttons && (
<div className="mt-6 flex flex-row gap-2 justify-center flex-wrap">
{buttons.map((button) => (
<Button key={button.href} variant="ghost" asChild>
<Button key={button.href} variant="ghost" size="default" asChild>
{button.target ? (
<a href={button.href} target={button.target} rel="noopener noreferrer">
{button.text} <ArrowRight size={14} className="ml-2" />
Expand Down
2 changes: 1 addition & 1 deletion components/OSSFriendsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export async function OSSFriendsPage() {
</Link>
<p className="my-2">{friend.description}</p>
<div className="mt-auto">
<Button target="_blank" variant="secondary" asChild>
<Button target="_blank" variant="secondary" size="default" asChild>
<Link href={friend.href} rel="noopener">
Learn more
</Link>
Expand Down
4 changes: 2 additions & 2 deletions components/customers/CustomerStoryCTA.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ export const CustomerStoryCTA = () => {
Langfuse&apos;s open-source observability platform.
</Text>
<div className="flex flex-wrap gap-3 justify-center items-center">
<Button variant="primary" href="/cloud">
<Button variant="primary" size="default" href="/cloud">
Start free
</Button>
<Button variant="secondary" href="/docs">
<Button variant="secondary" size="default" href="/docs">
Documentation
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions components/home/BulletList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function BulletList({ items }: { items: BulletItem[] }) {
{items.map((item) => (
<li key={item.label} className="flex gap-2 items-center">
<span
className="w-0.75 h-0.75 rounded-full shrink-0 bg-text-tertiary transition-colors group-hover:bg-text-secondary"
className="w-0.75 h-0.75 rounded-full shrink-0 bg-text-tertiary transition-colors group-hover/box:bg-text-secondary"
aria-hidden
/>
{item.href ? (
Expand All @@ -26,7 +26,7 @@ export function BulletList({ items }: { items: BulletItem[] }) {
) : (
<Text
size="s"
className="text-left transition-colors text-text-tertiary group-hover:text-text-secondary"
className="text-left transition-colors text-text-tertiary group-hover/box:text-text-secondary"
>
{item.label}
</Text>
Expand Down
9 changes: 6 additions & 3 deletions components/home/DeveloperTools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const DeveloperTools = () => {
</div>

<div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2">
<CornerBox className="flex relative z-0 flex-col p-0 min-h-0 md:row-span-2">
<CornerBox hoverStripes className="flex relative z-0 flex-col p-0 min-h-0 md:row-span-2">
Comment thread
felixkrrr marked this conversation as resolved.
<div className="flex flex-col gap-1 p-4">
<Link
href={SKILL_HREF}
Expand All @@ -61,14 +61,15 @@ export const DeveloperTools = () => {
<div className="flex flex-col items-start px-4 pb-4 -ml-1.25">
<Button
variant="secondary"
size="small"
href={SKILL_HREF}
>
Install Skill
</Button>
</div>
</CornerBox>

<CornerBox className="flex relative z-0 flex-col gap-1 p-4 -mt-px md:mt-0 md:-ml-px">
<CornerBox hoverStripes className="flex relative z-0 flex-col gap-1 p-4 -mt-px md:mt-0 md:-ml-px">
<Link
href={CLI_HREF}
className="text-left text-[15px] font-medium text-text-secondary"
Expand All @@ -82,14 +83,15 @@ export const DeveloperTools = () => {
<div className="flex flex-col items-start mt-4 -ml-1.25">
<Button
variant="secondary"
size="small"
href={CLI_HREF}
>
Configure CLI
</Button>
</div>
</CornerBox>

<CornerBox className="flex relative z-0 flex-col gap-1 p-4 -mt-px md:-ml-px">
<CornerBox hoverStripes className="flex relative z-0 flex-col gap-1 p-4 -mt-px md:-ml-px">
<Link
href={MCP_HREF}
className="text-left text-[15px] font-medium text-text-secondary"
Expand All @@ -103,6 +105,7 @@ export const DeveloperTools = () => {
<div className="flex flex-col items-start mt-4 -ml-1.25">
<Button
variant="secondary"
size="small"
href={MCP_HREF}
>
Configure MCP
Expand Down
6 changes: 4 additions & 2 deletions components/home/FeaturedCustomers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export function FeaturedCustomers({ corners = { tl: true, tr: true, bl: true, br
return (
<CornerBox
ref={containerRef}
hoverStripes
Comment thread
claude[bot] marked this conversation as resolved.
className="flex flex-col gap-3 p-4 -mt-px lg:flex-row lg:items-center lg:gap-6"
corners={corners}
onMouseEnter={() => setIsHovered(true)}
Expand Down Expand Up @@ -146,6 +147,7 @@ export function FeaturedCustomers({ corners = { tl: true, tr: true, bl: true, br
<div className="ml-auto shrink-0 lg:ml-0 lg:order-last">
<Button
href="/cloud"
size="default"
shortcutKey="s"
>
Start free
Expand All @@ -165,9 +167,9 @@ export function FeaturedCustomers({ corners = { tl: true, tr: true, bl: true, br
>
<a
href={story.href}
className="inline-flex items-baseline gap-1.5 group"
className="inline-flex items-baseline gap-1.5 group/story-link"
>
<span className="text-[15px] font-medium text-text-primary leading-snug group-hover:underline">
<span className="text-[15px] font-medium text-text-primary leading-snug group-hover/story-link:underline">
{story.name}
</span>
<svg
Expand Down
2 changes: 2 additions & 0 deletions components/home/GetStartedSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,7 @@ export function GetStartedSection() {
<div className="flex sm:flex-col gap-0 items-start shrink-0 w-full sm:w-[150px]">
<Button
variant="primary"
size="default"
shortcutKey="s"
href="/cloud"
wrapperClassName="sm:flex-none sm:w-full"
Expand All @@ -275,6 +276,7 @@ export function GetStartedSection() {
</Button>
<Button
variant="secondary"
size="default"
shortcutKey="d"
href="/docs"
wrapperClassName="sm:flex-none sm:w-full"
Expand Down
3 changes: 2 additions & 1 deletion components/home/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,13 @@ export function Hero() {
<div className="flex flex-wrap gap-3 justify-center items-center">
<Button
variant="primary"
size="default"
shortcutKey="s"
href="/cloud"
>
Start free
</Button>
<Button variant="secondary" shortcutKey="d" href="/docs">
<Button variant="secondary" size="default" shortcutKey="d" href="/docs">
Documentation
</Button>
</div>
Expand Down
5 changes: 3 additions & 2 deletions components/home/Integrations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@ function IntegrationGroupCard({
<div
className={cn(
"relative border border-line-structure bg-surface-bg rounded-[2px]",
"corner-box-hover-stripes transition-[background] duration-180 ease-out",
"integration-group flex flex-col gap-3.5 items-start p-3 sm:p-4.5",
className
)}
Expand Down Expand Up @@ -328,7 +329,7 @@ export function Integrations() {
showMoreLabel
/>

<div className="integration-group sm:col-span-2 flex flex-col gap-4 items-start p-3 sm:p-4.5 border border-line-structure bg-surface-bg rounded-[2px]">
<div className="integration-group sm:col-span-2 flex flex-col gap-4 items-start p-3 sm:p-4.5 border border-line-structure bg-surface-bg rounded-[2px] corner-box-hover-stripes transition-[background] duration-180 ease-out">
<div className="flex flex-row flex-wrap gap-y-1 gap-x-3 justify-between items-baseline w-full">
<Text size="m" className="font-medium text-left text-text-secondary">
80+ more integrations
Expand All @@ -340,7 +341,7 @@ export function Integrations() {
</div>
</div>

<div className="sm:col-span-2 flex flex-row flex-wrap gap-y-2 gap-x-3 justify-between items-center p-3 sm:px-4.5 sm:py-3 border border-line-structure bg-surface-bg rounded-[2px]">
<div className="sm:col-span-2 flex flex-row flex-wrap gap-y-2 gap-x-3 justify-between items-center p-3 sm:px-4.5 sm:py-3 border border-line-structure bg-surface-bg rounded-[2px] corner-box-hover-stripes transition-[background] duration-180 ease-out">
<Button variant="secondary" size="small" href="/integrations">
See all integrations
</Button>
Expand Down
3 changes: 3 additions & 0 deletions components/home/pricing/PricingTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1461,6 +1461,7 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
<div className="flex gap-2">
<Button
variant={tier.featured ? "primary" : "secondary"}
size="default"
href={tier.href}
wrapperClassName="flex-1"
className={cn(
Expand All @@ -1473,6 +1474,7 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
</Button>
<Button
variant="secondary"
size="default"
href={tier.ctaCallout.href}
wrapperClassName="flex-1"
className="justify-center! group-hover:border-line-structure hover:border-line-cta"
Expand All @@ -1483,6 +1485,7 @@ export function PricingPlans({ variant }: { variant: DeploymentOption }) {
) : (
<Button
variant={tier.featured ? "primary" : "secondary"}
size="default"
href={tier.href}
className={cn(
"justify-center!",
Expand Down
4 changes: 2 additions & 2 deletions components/ui/button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ function hasRenderableChildren(children: React.ReactNode): boolean {
);
}

function buttonVariants({ variant = "primary", size = "default", className }: ButtonVariantOptions) {
function buttonVariants({ variant = "primary", size = "small", className }: ButtonVariantOptions) {
Comment thread
felixkrrr marked this conversation as resolved.
if (variant === "text") {
return cn(
textButtonBaseClasses,
Expand Down Expand Up @@ -133,7 +133,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
: variant === "text"
? "text"
: "primary";
const resolvedSize: ButtonSize = size === "small" ? "small" : "default";
const resolvedSize: ButtonSize = size === "default" ? "default" : "small";

const innerRef = React.useRef<HTMLElement | null>(null);
const isLink = !asChild && Boolean(href);
Expand Down
4 changes: 2 additions & 2 deletions components/ui/chip-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,10 @@ const ChipCard = React.forwardRef<HTMLAnchorElement | HTMLDivElement, ChipCardPr
);

const baseClassName = cn(
"box-custom-hover",
"corner-box-hover-stripes transition-[background] duration-180 ease-out",
Comment thread
claude[bot] marked this conversation as resolved.
"relative group inline-flex items-center",
"border border-line-structure bg-surface-bg rounded-[2px]",
"transition-colors duration-120 cursor-pointer",
"cursor-pointer",
isMd ? "gap-3 px-4 py-3 min-w-[140px]" : "gap-2.5 px-3.5 py-2.5",
className
);
Expand Down
2 changes: 1 addition & 1 deletion components/ui/corner-box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const CornerBox = React.forwardRef<HTMLDivElement, CornerBoxProps>(
noBorder ? "corner-box-corners-flush" : "border border-line-structure corner-box-corners",
withStripes && "with-stripes",
hoverStripes &&
"group corner-box-hover-stripes transition-[background] duration-180 ease-out",
"group/box corner-box-hover-stripes transition-[background] duration-180 ease-out",
className
)}
style={hasCustomCorners ? { ...cornerStyle, ...style } : style}
Expand Down
2 changes: 1 addition & 1 deletion components/ui/link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const linkVariants = cva(
variant: {
default: "text-foreground hover:text-muted-foreground",
nav: "text-text-tertiary hover:text-text-secondary no-underline font-sans text-[13px] font-[430] leading-[1.2] tracking-[-0.26px] [text-shadow:0_0_0_#B5AFEA]",
text: "leading-snug font-[430] tracking-[-0.26px] text-text-tertiary underline decoration-line-structure underline-offset-2 transition-colors group-hover:text-text-secondary hover:text-text-primary",
text: "leading-snug font-[430] tracking-[-0.26px] text-text-tertiary underline decoration-line-structure underline-offset-2 transition-colors group-hover:text-text-secondary group-hover/box:text-text-secondary hover:text-text-primary",
underline:
"text-text-links underline decoration-1 underline-offset-2 decoration-text-links hover:text-primary hover:decoration-primary font-normal",
button:
Expand Down
1 change: 1 addition & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -838,6 +838,7 @@

.corner-box-corners--hover::before {
opacity: 0;
z-index: 20;
transition: opacity 0.2s ease;
}
Comment thread
felixkrrr marked this conversation as resolved.

Expand Down
Loading