81 lines
2.5 KiB
TypeScript
81 lines
2.5 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: {
|
|
// Resting chip sits on the raised surface tone (#21232b) so it reads
|
|
// distinct from the peer bubble (~#181a20) instead of blending in; hover/
|
|
// active step one tone lighter. The aria-pressed selector below swaps the
|
|
// whole set to the Primary (Fleet-violet) palette.
|
|
[Container]: color.SurfaceVariant.ContainerActive,
|
|
[ContainerHover]: color.SurfaceVariant.ContainerLine,
|
|
[ContainerActive]: color.SurfaceVariant.ContainerLine,
|
|
[ContainerLine]: color.SurfaceVariant.ContainerLine,
|
|
[OnContainer]: color.SurfaceVariant.OnContainer,
|
|
},
|
|
padding: `${toRem(2)} ${config.space.S200} ${toRem(2)} ${config.space.S100}`,
|
|
backgroundColor: Container,
|
|
// Borderless filled pill (canon stream-v2-dawn.jsx line 100); a transparent
|
|
// 1px keeps the aria-selected outline crisp without an outline at rest.
|
|
border: `${config.borderWidth.B300} solid transparent`,
|
|
borderRadius: toRem(9999),
|
|
|
|
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 ReactionText = style([
|
|
DefaultReset,
|
|
{
|
|
minWidth: 0,
|
|
maxWidth: toRem(150),
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
lineHeight: toRem(20),
|
|
},
|
|
]);
|
|
|
|
export const ReactionImg = style([
|
|
DefaultReset,
|
|
{
|
|
height: '1em',
|
|
minWidth: 0,
|
|
maxWidth: toRem(150),
|
|
objectFit: 'contain',
|
|
},
|
|
]);
|