litruv
61d41900cc
Manila folders, ruled chat, post-it nav, and folder tabs; dark variant uses Catppuccin Mocha colors with muted stickies and soft glows.
97 lines
2.6 KiB
TypeScript
97 lines
2.6 KiB
TypeScript
import { createVar, style } from '@vanilla-extract/css';
|
|
import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
|
|
|
|
const Container = createVar();
|
|
const ContainerHover = createVar();
|
|
const ContainerActive = createVar();
|
|
const ContainerLine = createVar();
|
|
const OnContainer = createVar();
|
|
|
|
export const Reaction = style([
|
|
FocusOutline,
|
|
{
|
|
vars: {
|
|
[Container]: color.SurfaceVariant.Container,
|
|
[ContainerHover]: color.SurfaceVariant.ContainerHover,
|
|
[ContainerActive]: color.SurfaceVariant.ContainerActive,
|
|
[ContainerLine]: color.SurfaceVariant.ContainerLine,
|
|
[OnContainer]: color.SurfaceVariant.OnContainer,
|
|
},
|
|
padding: `${toRem(2)} ${config.space.S200} ${toRem(2)} ${config.space.S100}`,
|
|
backgroundColor: Container,
|
|
border: `${config.borderWidth.B300} solid ${ContainerLine}`,
|
|
borderRadius: config.radii.R300,
|
|
|
|
selectors: {
|
|
'button&': {
|
|
cursor: 'pointer',
|
|
},
|
|
'&[aria-pressed=true]': {
|
|
vars: {
|
|
[Container]: color.Primary.Container,
|
|
[ContainerHover]: color.Primary.ContainerHover,
|
|
[ContainerActive]: color.Primary.ContainerActive,
|
|
[ContainerLine]: color.Primary.ContainerLine,
|
|
[OnContainer]: color.Primary.OnContainer,
|
|
},
|
|
backgroundColor: Container,
|
|
},
|
|
'&[aria-selected=true]': {
|
|
borderColor: color.Secondary.Main,
|
|
borderWidth: config.borderWidth.B400,
|
|
},
|
|
'&:hover, &:focus-visible': {
|
|
backgroundColor: ContainerHover,
|
|
},
|
|
'&:active': {
|
|
backgroundColor: ContainerActive,
|
|
},
|
|
'&[aria-disabled=true], &:disabled': {
|
|
cursor: 'not-allowed',
|
|
},
|
|
},
|
|
},
|
|
]);
|
|
|
|
export const ReactionStack = style([
|
|
DefaultReset,
|
|
{
|
|
position: 'relative',
|
|
display: 'inline-grid',
|
|
placeItems: 'center',
|
|
gridTemplateColumns: '1fr',
|
|
gridTemplateRows: '1fr',
|
|
lineHeight: toRem(20),
|
|
minWidth: 0,
|
|
},
|
|
]);
|
|
|
|
export const ReactionText = style([
|
|
DefaultReset,
|
|
{
|
|
minWidth: 0,
|
|
maxWidth: toRem(150),
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
lineHeight: toRem(20),
|
|
gridArea: '1 / 1',
|
|
transformOrigin: 'center center',
|
|
// Fan each stacked copy so count>1 reads as multiple stickers
|
|
transform: `translate(
|
|
calc(var(--sticker-i, 0) * 7px - 2px),
|
|
calc(var(--sticker-i, 0) * -5px)
|
|
) rotate(calc((var(--sticker-i, 0) - 1) * 12deg))`,
|
|
},
|
|
]);
|
|
|
|
export const ReactionImg = style([
|
|
DefaultReset,
|
|
{
|
|
height: '1em',
|
|
minWidth: 0,
|
|
maxWidth: toRem(150),
|
|
objectFit: 'contain',
|
|
},
|
|
]);
|