mirror of
https://github.com/luxfi/design.git
synced 2026-10-30 16:58:57 +00:00
zeekay
d954227524
Monochrome, dark by default. One hue rendered through an opacity ladder. Tokens (color, type, spacing, radius, elevation, motion) + core/forms/navigation/ overlays components + brand guidelines + ui kit. The single source of truth for every Lux surface — loadable and editable.
30 lines
1.1 KiB
React
30 lines
1.1 KiB
React
import React from 'react'
|
|
|
|
/** The canonical Lux 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>
|
|
)
|
|
}
|