faa952295f
* add new create room * rename create room modal file * default restrict access for space children in room create modal * move create room kind selector to components * add radii variant to sequence card component * more more reusable create room logic to components * add create space * update address input description * add new space modal * fix add room button visible on left room in space lobby
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { ComplexStyleRule } from '@vanilla-extract/css';
|
|
import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
|
|
import { ContainerColor as TContainerColor, DefaultReset, color, config } from 'folds';
|
|
|
|
const getVariant = (variant: TContainerColor): ComplexStyleRule => ({
|
|
vars: {
|
|
backgroundColor: color[variant].Container,
|
|
borderColor: color[variant].ContainerLine,
|
|
outlineColor: color[variant].ContainerLine,
|
|
color: color[variant].OnContainer,
|
|
},
|
|
selectors: {
|
|
'button&[aria-pressed=true]': {
|
|
backgroundColor: color[variant].ContainerActive,
|
|
},
|
|
'button&:hover, &:focus-visible': {
|
|
backgroundColor: color[variant].ContainerHover,
|
|
},
|
|
'button&:active': {
|
|
backgroundColor: color[variant].ContainerActive,
|
|
},
|
|
'button&[disabled]': {
|
|
opacity: config.opacity.Disabled,
|
|
},
|
|
},
|
|
});
|
|
|
|
export const ContainerColor = recipe({
|
|
base: [DefaultReset],
|
|
variants: {
|
|
variant: {
|
|
Background: getVariant('Background'),
|
|
Surface: getVariant('Surface'),
|
|
SurfaceVariant: getVariant('SurfaceVariant'),
|
|
Primary: getVariant('Primary'),
|
|
Secondary: getVariant('Secondary'),
|
|
Success: getVariant('Success'),
|
|
Warning: getVariant('Warning'),
|
|
Critical: getVariant('Critical'),
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'Surface',
|
|
},
|
|
});
|
|
|
|
export type ContainerColorVariants = RecipeVariants<typeof ContainerColor>;
|