engineering/tpmjs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2.0k

feat(design-system): complete blueprint aesthetic redesign with editorial typography

Browse source 
- 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>
This commit is contained in:
Ajax Davis 2025-11-26 08:33:03 +10:00
parent 8e122aa468
commit 27f867ff24
30 changed files with 1265 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

6
packages/ui/src/CodeBlock/CodeBlock.test.tsx
View file

@ -276,7 +276,7 @@ describe("CodeBlock", () => {
);
const codeblock = screen.getByTestId("codeblock");
expect(codeblock.className).toContain("custom-class");
expect(codeblock.className).toContain("bg-zinc-900");
expect(codeblock.className).toContain("bg-background");
expect(codeblock.className).toContain("border");
});
});
@ -302,7 +302,7 @@ describe("CodeBlock", () => {
render(<CodeBlock code="code" data-testid="codeblock" />);
const codeblock = screen.getByTestId("codeblock");
expect(codeblock.className).toContain("relative");
expect(codeblock.className).toContain("bg-zinc-900");
expect(codeblock.className).toContain("bg-background");
expect(codeblock.className).toContain("border");
expect(codeblock.className).toContain("overflow-hidden");
});
@ -313,7 +313,7 @@ describe("CodeBlock", () => {
const code = codeblock.querySelector("code");
expect(code?.className).toContain("block");
expect(code?.className).toContain("font-mono");
expect(code?.className).toContain("text-zinc-300");
expect(code?.className).toContain("text-foreground-secondary");
expect(code?.className).toContain("overflow-x-auto");
expect(code?.className).toContain("whitespace-pre");
});

12
packages/ui/src/CodeBlock/variants.ts
View file

@ -8,9 +8,9 @@ export const codeBlockContainerVariants = createVariants({
// Layout
"relative",
// Background
"bg-zinc-900",
"bg-background",
// Border
"border border-zinc-800 rounded-lg",
"border border-border rounded-lg",
// Overflow
"overflow-hidden",
].join(" "),
@ -32,7 +32,7 @@ export const codeBlockCodeVariants = createVariants({
// Font
"font-mono",
// Color
"text-zinc-300",
"text-foreground-secondary",
// Overflow
"overflow-x-auto",
// Whitespace
@ -66,11 +66,11 @@ export const codeBlockCopyButtonVariants = createVariants({
// Size
"w-8 h-8",
// Background
"bg-zinc-800 hover:bg-zinc-700",
"bg-surface-elevated hover:bg-accent",
// Border
"border border-zinc-700 rounded",
"border border-border rounded",
// Color
"text-zinc-400 hover:text-zinc-100",
"text-foreground-secondary hover:text-foreground",
// Cursor
"cursor-pointer",
// Transition