32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
|
import { style } from '@vanilla-extract/css';
|
||
|
|
import { color, config } from 'folds';
|
||
|
|
|
||
|
|
// Shared base for the chat-background / seasonal-theme preview swatches. These
|
||
|
|
// are inherently custom tiles (they render a live background preview), so they
|
||
|
|
// can't be a folds MenuItem/Chip — but the chrome (radius, border, hover, and a
|
||
|
|
// proper keyboard focus ring) now comes from design tokens instead of raw
|
||
|
|
// rgba/px inline styles. Size + the preview background stay inline per-swatch.
|
||
|
|
export const BgSwatch = style({
|
||
|
|
display: 'block',
|
||
|
|
padding: 0,
|
||
|
|
cursor: 'pointer',
|
||
|
|
overflow: 'hidden',
|
||
|
|
borderRadius: config.radii.R300,
|
||
|
|
borderWidth: config.borderWidth.B400,
|
||
|
|
borderStyle: 'solid',
|
||
|
|
borderColor: color.SurfaceVariant.ContainerLine,
|
||
|
|
transition: 'border-color 100ms ease-in-out',
|
||
|
|
selectors: {
|
||
|
|
'&:hover': {
|
||
|
|
borderColor: color.Primary.ContainerLine,
|
||
|
|
},
|
||
|
|
'&:focus-visible': {
|
||
|
|
outline: `${config.borderWidth.B400} solid ${color.Primary.Main}`,
|
||
|
|
outlineOffset: config.space.S100,
|
||
|
|
},
|
||
|
|
'&[data-selected="true"]': {
|
||
|
|
borderColor: color.Primary.Main,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|