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]>
149 lines
3.9 KiB
TypeScript
149 lines
3.9 KiB
TypeScript
import type { ButtonProps } from '@hanzo/gui'
|
|
|
|
import { getTokenRelative } from '@hanzogui/get-token'
|
|
import { accentTokenName } from '~/features/studio/accentThemeName'
|
|
import type { DemoOptions } from '../theme/demoOptions'
|
|
|
|
export function getDemoProps(demosOptions: DemoOptions, hasAccent = false) {
|
|
const accentToken = hasAccent ? accentTokenName : '$color9'
|
|
const isOutlined = demosOptions.fillStyle === 'outlined'
|
|
|
|
const accentColor = hasAccent ? '$accentColor' : '$color1'
|
|
const accentBackground = hasAccent ? accentToken : ('$color11' as const)
|
|
const accentBorder = isOutlined
|
|
? hasAccent
|
|
? accentToken
|
|
: '$borderColor'
|
|
: 'transparent'
|
|
|
|
const accentStyle = {
|
|
backgroundColor: isOutlined ? 'transparent' : accentToken,
|
|
color: isOutlined ? '$color2' : accentColor,
|
|
} as const
|
|
|
|
return {
|
|
borderRadiusProps: {
|
|
borderRadius: demosOptions.borderRadius,
|
|
borderWidth: demosOptions.borderWidth,
|
|
} as const,
|
|
|
|
borderRadiusOuterProps: {
|
|
borderRadius: getTokenRelative('radius', demosOptions.borderRadius as any, {
|
|
shift: 1,
|
|
}),
|
|
borderWidth: demosOptions.borderWidth,
|
|
} as const,
|
|
|
|
accentColor,
|
|
accentBackground,
|
|
accentStyle,
|
|
|
|
headingFontFamilyProps: {
|
|
fontFamily: demosOptions.headingFontFamily,
|
|
fontWeight: '500',
|
|
size: '$4',
|
|
fontSize: 25,
|
|
color:
|
|
demosOptions.textAccent === 'high'
|
|
? '$color12'
|
|
: demosOptions.textAccent === 'low'
|
|
? '$color11'
|
|
: '$color',
|
|
|
|
...(demosOptions.headingFontFamily == '$heading' && {
|
|
fontSize: 14,
|
|
}),
|
|
|
|
...(demosOptions.headingFontFamily == '$pixel' && {
|
|
fontSize: 14,
|
|
}),
|
|
|
|
...(demosOptions.headingFontFamily === '$mono' && {
|
|
fontSize: 16,
|
|
}),
|
|
} as const,
|
|
|
|
buttonOutlineProps: {
|
|
variant: isOutlined ? ('outlined' as const) : (undefined as any),
|
|
color: isOutlined ? '$color10' : undefined,
|
|
// ...(hasAccent && accentStyle),
|
|
borderColor: hasAccent ? accentBorder : '$borderColor',
|
|
} as ButtonProps,
|
|
|
|
stackOutlineProps: {
|
|
backgroundColor: demosOptions.backgroundAccent === 'low' ? '$color1' : '$color2',
|
|
} as const,
|
|
|
|
chatFrameProps: {
|
|
borderColor: isOutlined ? '$borderColor' : 'transparent',
|
|
backgroundColor: isOutlined
|
|
? undefined
|
|
: demosOptions.backgroundAccent === 'high'
|
|
? '$color3'
|
|
: '$color2',
|
|
} as const,
|
|
|
|
chatFrameActiveProps: {
|
|
borderColor: 'transparent',
|
|
backgroundColor: isOutlined ? 'transparent' : accentBackground,
|
|
} as const,
|
|
|
|
chatTextProps: {} as const,
|
|
|
|
chatTextActiveProps: {
|
|
color: isOutlined ? '$color1' : '$color2',
|
|
} as const,
|
|
|
|
outlineTextProps: {
|
|
color: isOutlined ? '$color11' : '$color1',
|
|
} as const,
|
|
|
|
elevationProps: {
|
|
elevation: demosOptions.elevation,
|
|
} as const,
|
|
|
|
panelPaddingProps: {
|
|
padding:
|
|
demosOptions.spacing === 'lg'
|
|
? ('$7' as const)
|
|
: demosOptions.spacing === 'md'
|
|
? ('$5' as const)
|
|
: ('$4' as const),
|
|
} as const,
|
|
|
|
gapPropsMd: {
|
|
gap:
|
|
demosOptions.spacing === 'lg'
|
|
? ('$4' as const)
|
|
: demosOptions.spacing === 'md'
|
|
? ('$3' as const)
|
|
: ('$2' as const),
|
|
} as const,
|
|
|
|
gapPropsLg: {
|
|
gap:
|
|
demosOptions.spacing === 'lg'
|
|
? ('$5' as const)
|
|
: demosOptions.spacing === 'md'
|
|
? ('$4' as const)
|
|
: ('$3' as const),
|
|
} as const,
|
|
|
|
// these ones are just common props - nothing to do with the demo options
|
|
panelProps: {
|
|
shadowColor: 'rgba(0,0,0,0.2)',
|
|
borderWidth: 0.5,
|
|
borderColor: '$color3',
|
|
gap: '$3',
|
|
py: '$4',
|
|
width: '100%',
|
|
height: '100%',
|
|
} as const,
|
|
|
|
panelDescriptionProps: {
|
|
color: '$color10',
|
|
size: '$4',
|
|
} as const,
|
|
}
|
|
}
|