forked from github/cinny
42 lines
978 B
TypeScript
42 lines
978 B
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
|
|
|
|
const addReactionBase = {
|
|
padding: `${toRem(2)} ${config.space.S200}`,
|
|
backgroundColor: color.SurfaceVariant.Container,
|
|
border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
|
|
borderRadius: config.radii.R300,
|
|
cursor: 'pointer',
|
|
selectors: {
|
|
'&:hover, &:focus-visible': {
|
|
backgroundColor: color.SurfaceVariant.ContainerHover,
|
|
opacity: 1,
|
|
},
|
|
'&:active': {
|
|
backgroundColor: color.SurfaceVariant.ContainerActive,
|
|
},
|
|
},
|
|
} as const;
|
|
|
|
export const AddReactionChip = style([
|
|
DefaultReset,
|
|
FocusOutline,
|
|
{
|
|
...addReactionBase,
|
|
opacity: 0.6,
|
|
},
|
|
]);
|
|
|
|
export const AddReactionGhost = style([
|
|
DefaultReset,
|
|
FocusOutline,
|
|
{
|
|
...addReactionBase,
|
|
position: 'absolute',
|
|
left: config.space.S400,
|
|
bottom: config.space.S100,
|
|
opacity: 0.5,
|
|
zIndex: 1,
|
|
},
|
|
]);
|