52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
 
|
/** Знак «Слои»: два перекрывающихся скруглённых квадрата, цвета — из токенов бренда */
|
||
|
|
const MARK = {
|
||
|
|
// шапка сайта
|
||
|
|
lg: { box: 28, square: 21, radius: 7, offset: 3, blur: true },
|
||
|
|
// карточка входа
|
||
|
|
card: { box: 26, square: 19, radius: 6, offset: 3, blur: false },
|
||
|
|
// подвал сайта и кабинет
|
||
|
|
md: { box: 24, square: 18, radius: 6, offset: 3, blur: false },
|
||
|
|
} as const
|
||
|
|
|
||
|
|
const TEXT_SIZE = { lg: 'text-[17px]', card: 'text-base', md: 'text-[15px]' } as const
|
||
|
|
|
||
|
|
export function LogoMark({ size }: { size: keyof typeof MARK }) {
|
||
|
|
const { box, square, radius, offset, blur } = MARK[size]
|
||
|
|
return (
|
||
|
|
<span aria-hidden className="relative block flex-none" style={{ width: box, height: box }}>
|
||
|
|
<span
|
||
|
|
className="absolute left-0 block"
|
||
|
|
style={{
|
||
|
|
top: offset,
|
||
|
|
width: square,
|
||
|
|
height: square,
|
||
|
|
borderRadius: radius,
|
||
|
|
background:
|
||
|
|
'linear-gradient(140deg, var(--accent), color-mix(in oklab, var(--accent) 55%, var(--glow-3)))',
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<span
|
||
|
|
className="absolute right-0 block border bg-veil"
|
||
|
|
style={{
|
||
|
|
bottom: offset,
|
||
|
|
width: square,
|
||
|
|
height: square,
|
||
|
|
borderRadius: radius,
|
||
|
|
borderColor: 'color-mix(in oklab, var(--accent) 35%, transparent)',
|
||
|
|
backdropFilter: blur ? 'blur(2px)' : undefined,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
/** Надпись логотипа: Unbounded 600 */
|
||
|
|
export function LogoText({ children, size }: { children: string; size: keyof typeof TEXT_SIZE }) {
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
className={`font-logo font-semibold tracking-[-0.02em] whitespace-nowrap ${TEXT_SIZE[size]}`}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</span>
|
||
|
|
)
|
||
|
|
}
|