Something went wrong. Try again.
personal fork of bluesky app bsky.kelinci.net
Something went wrong. Try again.
2.0 kB · 80 lines
TypeScript
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081import { createVar, fallbackVar, style } from '@vanilla-extract/css';
import { vars } from '#/styles/contract.css';import { layered } from '#/styles/layers';import { components } from '#/styles/layers.css';import { fontSize } from '#/styles/tokens.css';
const borderWidth = 1;const lineHeight = 1.2;const paddingBlock = 12;
export const maxRowsVar = createVar();
export const root = style( layered(components, { display: 'flex', flexDirection: 'column', }),);
export const label = style({ display: 'block', marginBottom: 8,});
export const labelRow = style({ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8,});
export const input = style( layered(components, { appearance: 'none', boxSizing: 'border-box', display: 'block', margin: 0, outline: 'none', border: `${borderWidth}px solid transparent`, borderRadius: 10, backgroundColor: vars.palette.contrast_50, paddingBlock, paddingInline: 15, width: '100%', lineHeight, color: vars.palette.contrast_1000, fontFamily: 'inherit', fontSize: fontSize.md, selectors: { '&::placeholder': { color: vars.palette.contrast_500 }, '&:disabled': { opacity: 0.5, cursor: 'default' }, '&:hover': { borderColor: vars.palette.contrast_100 }, '&:focus': { borderColor: vars.palette.primary_500, backgroundColor: vars.palette.primary_25 }, }, }),);
export const invalid = style( layered(components, { borderColor: vars.palette.negative_300, backgroundColor: vars.palette.negative_25, selectors: { '&:hover': { borderColor: vars.palette.negative_500 }, '&:focus': { borderColor: vars.palette.negative_500, backgroundColor: vars.palette.negative_25 }, }, }),);
export const multiline = style( layered(components, { fieldSizing: 'content', minHeight: 80, maxHeight: `calc(${fontSize.md} * ${lineHeight} * ${fallbackVar(maxRowsVar, '9999')} + ${ paddingBlock * 2 + borderWidth * 2 }px)`, resize: 'none', scrollPaddingBlock: paddingBlock, }),);