Something went wrong. Try again.
personal fork of bluesky app bsky.kelinci.net
Something went wrong. Try again.
3.7 kB · 112 lines
TypeScript
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113import { createVar, fallbackVar, style, styleVariants } from '@vanilla-extract/css';
import { typedKeys } from '#/lib/utils/objects';
import { colors } from '#/styles/colors';import { components } from '#/styles/layers.css';import { recipe } from '#/styles/recipe';import { roundToPx } from '#/styles/round';import { fontLeading, fontSize, fontWeight, lineHeight } from '#/styles/tokens.css';
const variantsFor = <Scale extends Record<string, number | string>, Property extends string>( scale: Scale, property: Property,): { [Key in keyof Scale]: Record<Property, Scale[Key]> } => { const out: Record<string, Record<string, number | string>> = {}; for (const [key, value] of Object.entries(scale)) { out[key] = { [property]: value }; } // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- one entry per `scale` key; computed keys widen to an index signature return out as { [Key in keyof Scale]: Record<Property, Scale[Key]> };};
const textColors = { text: colors.text, textContrastHigh: colors.textContrastHigh, textContrastLow: colors.textContrastLow, textContrastMedium: colors.textContrastMedium, textLink: colors.textLink,
white: colors.white, contrast_400: colors.contrast_400, primary_500: colors.primary_500, primary_600: colors.primary_600, primary_900: colors.primary_900, negative_400: colors.negative_400, negative_500: colors.negative_500, negative_600: colors.negative_600,};
export const fontSizeVar = createVar();export const sizeLeadingVar = createVar();export const leadingOverrideVar = createVar();
const fontSizeScale = fallbackVar(fontSizeVar, fontSize.md);const pairedLeading = fallbackVar(sizeLeadingVar, String(fontLeading.md));const leading = fallbackVar(leadingOverrideVar, pairedLeading);
const sizeVariants = (): { [K in keyof typeof fontLeading]: { vars: Record<string, string> } } => { const out: Record<string, { vars: Record<string, string> }> = {}; for (const key of typedKeys(fontLeading)) { out[key] = { vars: { [fontSizeVar]: fontSize[key], [sizeLeadingVar]: String(fontLeading[key]) } }; } // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- the loop writes one entry per `fontLeading` key return out as { [K in keyof typeof fontLeading]: { vars: Record<string, string> } };};
export const text = recipe( { base: { margin: 0, padding: 0, lineHeight: roundToPx(`calc(${fontSizeScale} * ${leading})`), whiteSpace: 'pre-wrap', overflowWrap: 'break-word', fontFamily: 'inherit', fontSize: fontSizeScale, }, defaultVariants: { color: 'text', leading: 'snug', size: 'md' }, variants: { align: { center: { textAlign: 'center' }, left: { textAlign: 'left' }, right: { textAlign: 'right' } }, color: variantsFor(textColors, 'color'), leading: { none: { vars: { [leadingOverrideVar]: String(lineHeight.none) } }, snug: { vars: { [leadingOverrideVar]: pairedLeading } }, }, size: sizeVariants(), weight: variantsFor(fontWeight, 'fontWeight'), }, }, { debugId: 'text', layer: components },);
export const lineClampVar = createVar();
export const clampSingleLine = style({ '@layer': { [components]: { minWidth: 0, maxWidth: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', }, },});
export const clampMultiLine = style({ '@layer': { [components]: { display: '-webkit-box', overflow: 'hidden', textOverflow: 'ellipsis', WebkitBoxOrient: 'vertical', WebkitLineClamp: lineClampVar, }, },});
export const userSelect = styleVariants({ none: { '@layer': { [components]: { userSelect: 'none' } } }, text: { '@layer': { [components]: { userSelect: 'text' } } },});