61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import { globalStyle, style } from '@vanilla-extract/css';
|
|
import { color, config, toRem } from 'folds';
|
|
|
|
const tailTopBase = {
|
|
content: '""',
|
|
position: 'absolute' as const,
|
|
top: toRem(-5),
|
|
left: 'var(--speech-tail-x, 50%)',
|
|
transform: 'translateX(-50%) rotate(45deg)',
|
|
width: toRem(10),
|
|
height: toRem(10),
|
|
};
|
|
|
|
export const SpeechBubble = style({
|
|
position: 'relative',
|
|
padding: `${toRem(8)} ${toRem(12)}`,
|
|
backgroundColor: color.SurfaceVariant.Container,
|
|
color: color.SurfaceVariant.OnContainer,
|
|
borderRadius: config.radii.R300,
|
|
boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
|
|
});
|
|
|
|
export const SpeechBubbleTailTop = style({
|
|
selectors: {
|
|
'&::before': {
|
|
...tailTopBase,
|
|
backgroundColor: color.SurfaceVariant.Container,
|
|
},
|
|
},
|
|
});
|
|
|
|
/** Popover menus (kebab, etc.) — surface matches folds Menu. */
|
|
export const SpeechBubbleMenu = style({
|
|
position: 'relative',
|
|
padding: 0,
|
|
backgroundColor: color.Surface.Container,
|
|
color: color.Surface.OnContainer,
|
|
borderRadius: config.radii.R400,
|
|
border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
|
boxShadow: '0 10px 28px rgb(0 0 0 / 28%), 0 2px 6px rgb(0 0 0 / 12%)',
|
|
overflow: 'visible',
|
|
});
|
|
|
|
export const SpeechBubbleMenuTailTop = style({
|
|
selectors: {
|
|
'&::before': {
|
|
...tailTopBase,
|
|
backgroundColor: color.Surface.Container,
|
|
borderLeft: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
|
borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
|
},
|
|
},
|
|
});
|
|
|
|
globalStyle(`${SpeechBubbleMenu} > *`, {
|
|
background: 'transparent',
|
|
border: 'none',
|
|
boxShadow: 'none',
|
|
});
|
|
|