27f867ff24
- Replace Geist fonts with Space Grotesk + Space Mono via next/font/google - Make dotted borders default for all card variants (default, elevated, outline) - Add blueprint grid backgrounds to homepage sections and playground - Create Section layout component with flexible semantic elements and spacing variants - Create GridContainer component with auto-fit/auto-fill responsive grid support - Add blueprint variants to Tabs and Button components (dotted borders) - Add editorial typography tokens (line-heights, letter-spacing) to Tailwind config - Add spacing tokens for airy editorial layouts - Add shadow utilities for blueprint aesthetic (shadow-blueprint, shadow-blueprint-hover) - Update 59 component tests for new variants and styling - All 429 tests passing, zero hardcoded colors, fully themeable 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
85 lines
1.5 KiB
TypeScript
85 lines
1.5 KiB
TypeScript
import { createVariants } from "../system/variants";
|
|
|
|
/**
|
|
* CodeBlock container variant definitions
|
|
*/
|
|
export const codeBlockContainerVariants = createVariants({
|
|
base: [
|
|
// Layout
|
|
"relative",
|
|
// Background
|
|
"bg-background",
|
|
// Border
|
|
"border border-border rounded-lg",
|
|
// Overflow
|
|
"overflow-hidden",
|
|
].join(" "),
|
|
|
|
variants: {},
|
|
|
|
compoundVariants: [],
|
|
|
|
defaultVariants: {},
|
|
});
|
|
|
|
/**
|
|
* CodeBlock code element variant definitions
|
|
*/
|
|
export const codeBlockCodeVariants = createVariants({
|
|
base: [
|
|
// Display
|
|
"block",
|
|
// Font
|
|
"font-mono",
|
|
// Color
|
|
"text-foreground-secondary",
|
|
// Overflow
|
|
"overflow-x-auto",
|
|
// Whitespace
|
|
"whitespace-pre",
|
|
].join(" "),
|
|
|
|
variants: {
|
|
size: {
|
|
sm: "text-xs p-3", // 12px font, 12px padding
|
|
md: "text-sm p-4", // 14px font, 16px padding
|
|
lg: "text-base p-6", // 16px font, 24px padding
|
|
},
|
|
},
|
|
|
|
compoundVariants: [],
|
|
|
|
defaultVariants: {
|
|
size: "md",
|
|
},
|
|
});
|
|
|
|
/**
|
|
* CodeBlock copy button variant definitions
|
|
*/
|
|
export const codeBlockCopyButtonVariants = createVariants({
|
|
base: [
|
|
// Position
|
|
"absolute top-2 right-2",
|
|
// Display
|
|
"flex items-center justify-center",
|
|
// Size
|
|
"w-8 h-8",
|
|
// Background
|
|
"bg-surface-elevated hover:bg-accent",
|
|
// Border
|
|
"border border-border rounded",
|
|
// Color
|
|
"text-foreground-secondary hover:text-foreground",
|
|
// Cursor
|
|
"cursor-pointer",
|
|
// Transition
|
|
"transition-colors duration-200",
|
|
].join(" "),
|
|
|
|
variants: {},
|
|
|
|
compoundVariants: [],
|
|
|
|
defaultVariants: {},
|
|
});
|