mirror of
https://github.com/hanzoai/design.git
synced 2026-10-30 14:58:37 +00:00
zooqueen
5e059914c8
The single source of truth for every Hanzo surface: monochrome opacity-ladder tokens (dark-default), self-contained core/forms/overlays/navigation components (each with .d.ts + .prompt.md), the mark/wordmark + provider/partner logos, and the specimen-card guidelines. One import: @hanzoai/design/styles.css.
30 lines
1.1 KiB
React
30 lines
1.1 KiB
React
import React from 'react'
|
|
|
|
/** The canonical Hanzo headline treatment: white → white/60 chrome gradient,
|
|
* clipped to the text. Never a saturated or rainbow gradient. */
|
|
export function ChromeText({ as = 'span', tone = 'chrome', preHeading, preHeadingStyle, style, children, ...rest }) {
|
|
const Tag = as
|
|
const gradient = tone === 'deep' ? 'var(--gradient-chrome-2)' : 'var(--gradient-chrome)'
|
|
const node = (
|
|
<Tag
|
|
style={{
|
|
backgroundImage:gradient,
|
|
WebkitBackgroundClip:'text',backgroundClip:'text',
|
|
WebkitTextFillColor:'transparent',color:'transparent',
|
|
display:'inline-block',
|
|
...style,
|
|
}}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
</Tag>
|
|
)
|
|
if (!preHeading) return node
|
|
return (
|
|
<span style={{display:'flex',flexDirection:'column',gap:12,alignItems:'inherit'}}>
|
|
<span style={{fontSize:'var(--text-xs)',fontWeight:'var(--weight-semibold)',textTransform:'uppercase',letterSpacing:'var(--tracking-widest)',color:'var(--text-helper)',...preHeadingStyle}}>{preHeading}</span>
|
|
{node}
|
|
</span>
|
|
)
|
|
}
|