mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekayandHanzo Dev
56e004e4b2
The kit shipped ten typefaces. One is ours. Deleted: font-inter, font-silkscreen, font-cherry-bomb, font-nohemi, font-dm-sans, font-dm-serif-display, font-fira-mono, font-glusp, font-munro. Six of those had no dependent in the workspace at all. font-zen stays, and so do font-size, get-font-sized and font, which size and register rather than name a face. Published versions remain on the registry, so anything pinned to one keeps resolving. @hanzogui/config's DEFAULT entry built heading and body from Inter — v4 was already system fonts and v5 already Zen, so an app on the default got a face nobody chose. It builds from Zen now. dev-config, which drives gui.hanzo.ai, was worse: Inter for text, Berkeley Mono for code, plus Cherry Bomb and Silkscreen. Every size, weight, letter-spacing and transform value is unchanged — only the faces moved. The pixel ROLE was worth keeping and only its face was borrowed, so font-zen gained Zen Pixel Square (createZenPixelFont, --font-zen-pixel-*) and the token is `$pixel`. `$silkscreen` and `$cherryBomb` are gone across ~35 call sites. Cherry Bomb had no role of its own and no Zen counterpart, so it is deleted rather than substituted. gui.hanzo.ai now self-hosts three Zen files in place of four foreign ones — one variable file per family instead of a weight per request — and its OG-image route renders cards in the same faces as the pages they link to. The Inter, Berkeley, Silkscreen and glusp binaries are gone from public/fonts, including an otf directory of 20 Inter cuts. Native is honestly short: @hanzo/font ships woff2 and react-native wants otf/ttf, so the expo starter and kitchen-sink's native entry load no custom face and say why, rather than keeping Inter because it happened to be there. bun install 0 · build 161/161 · typecheck passed. Co-authored-by: Hanzo Dev <[email protected]>
74 lines
3.0 KiB
TypeScript
74 lines
3.0 KiB
TypeScript
import { expect, test } from '@playwright/test'
|
|
|
|
import { getStyles } from './utils'
|
|
import { setupPage } from './test-utils'
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await setupPage(page, { name: 'ParagraphSpanFontInheritance', type: 'useCase' })
|
|
})
|
|
|
|
test(`Span inherits $mono fontFamily from Paragraph`, async ({ page }) => {
|
|
const parentStyles = await getStyles(page.getByTestId('parent-mono').first())
|
|
const nestedStyles = await getStyles(page.getByTestId('nested-span-mono').first())
|
|
|
|
// parent should have mono font family
|
|
expect(parentStyles.fontFamily).toContain('mono')
|
|
|
|
// span should inherit the mono font family
|
|
expect(nestedStyles.fontFamily).toBe(parentStyles.fontFamily)
|
|
})
|
|
|
|
test(`Span inherits $body fontFamily from Paragraph`, async ({ page }) => {
|
|
const parentStyles = await getStyles(page.getByTestId('parent-body').first())
|
|
const nestedStyles = await getStyles(page.getByTestId('nested-span-body').first())
|
|
|
|
// span should inherit the body font family
|
|
expect(nestedStyles.fontFamily).toBe(parentStyles.fontFamily)
|
|
})
|
|
|
|
test(`nested Text inherits $mono fontFamily from Text (baseline)`, async ({ page }) => {
|
|
const parentStyles = await getStyles(page.getByTestId('parent-text-mono').first())
|
|
const nestedStyles = await getStyles(page.getByTestId('nested-text-mono').first())
|
|
|
|
// parent should have mono font family
|
|
expect(parentStyles.fontFamily).toContain('mono')
|
|
|
|
// nested text should inherit the mono font family
|
|
expect(nestedStyles.fontFamily).toBe(parentStyles.fontFamily)
|
|
})
|
|
|
|
test(`Span explicit fontFamily override works`, async ({ page }) => {
|
|
const parentStyles = await getStyles(page.getByTestId('parent-mono-override').first())
|
|
const nestedStyles = await getStyles(page.getByTestId('nested-span-override').first())
|
|
|
|
// parent should have mono font family
|
|
expect(parentStyles.fontFamily).toContain('mono')
|
|
|
|
// span with explicit $body should NOT inherit mono
|
|
expect(nestedStyles.fontFamily).not.toBe(parentStyles.fontFamily)
|
|
})
|
|
|
|
test(`SizableText keeps its explicit fontFamily (does not inherit)`, async ({ page }) => {
|
|
const parentStyles = await getStyles(page.getByTestId('parent-mono-sizable').first())
|
|
const nestedStyles = await getStyles(page.getByTestId('nested-sizable-body').first())
|
|
|
|
// parent should have mono font family
|
|
expect(parentStyles.fontFamily).toContain('mono')
|
|
|
|
// SizableText has explicit fontFamily: '$body' in its static config,
|
|
// so it should NOT inherit mono but keep its body font
|
|
expect(nestedStyles.fontFamily).not.toBe(parentStyles.fontFamily)
|
|
expect(nestedStyles.fontFamily).toContain('Zen')
|
|
})
|
|
|
|
test(`Text (like Link) inside Paragraph inherits fontFamily`, async ({ page }) => {
|
|
const parentStyles = await getStyles(page.getByTestId('parent-para-link').first())
|
|
const nestedStyles = await getStyles(page.getByTestId('nested-link-text').first())
|
|
|
|
// parent should have mono font family
|
|
expect(parentStyles.fontFamily).toContain('mono')
|
|
|
|
// nested Text should inherit the mono font family
|
|
expect(nestedStyles.fontFamily).toBe(parentStyles.fontFamily)
|
|
})
|