08e975cd8e
* add active theme context * add chroma js library * add hook for accessible tag color * disable reply user color - temporary * render user color based on tag in room timeline * remove default tag icons * move accessible color function to plugins * render user power color in reply * increase username weight in timeline * add default color for member power level tag * show red slash in power color badge with no color * show power level color in room input reply * show power level username color in notifications * show power level color in notification reply * show power level color in message search * render power level color in room pin menu * add toggle for legacy username colors * drop over saturation from member default color * change border color of power color badge * show legacy username color in direct rooms
91 lines
1.9 KiB
TypeScript
91 lines
1.9 KiB
TypeScript
import { createVar, style } from '@vanilla-extract/css';
|
|
import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
|
|
import { color, config, DefaultReset, toRem } from 'folds';
|
|
|
|
export const PowerColorBadge = style({
|
|
display: 'inline-flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0,
|
|
width: toRem(16),
|
|
height: toRem(16),
|
|
borderRadius: config.radii.Pill,
|
|
border: `${config.borderWidth.B300} solid ${color.Secondary.ContainerLine}`,
|
|
position: 'relative',
|
|
});
|
|
|
|
export const PowerColorBadgeNone = style({
|
|
selectors: {
|
|
'&::before': {
|
|
content: '',
|
|
display: 'inline-block',
|
|
width: '100%',
|
|
height: config.borderWidth.B300,
|
|
backgroundColor: color.Critical.Main,
|
|
|
|
position: 'absolute',
|
|
transform: `rotateZ(-45deg)`,
|
|
},
|
|
},
|
|
});
|
|
|
|
const PowerIconSize = createVar();
|
|
export const PowerIcon = recipe({
|
|
base: [
|
|
DefaultReset,
|
|
{
|
|
display: 'inline-flex',
|
|
height: PowerIconSize,
|
|
minWidth: PowerIconSize,
|
|
fontSize: PowerIconSize,
|
|
lineHeight: PowerIconSize,
|
|
borderRadius: config.radii.R300,
|
|
cursor: 'default',
|
|
},
|
|
],
|
|
variants: {
|
|
size: {
|
|
'50': {
|
|
vars: {
|
|
[PowerIconSize]: config.size.X50,
|
|
},
|
|
},
|
|
'100': {
|
|
vars: {
|
|
[PowerIconSize]: config.size.X100,
|
|
},
|
|
},
|
|
'200': {
|
|
vars: {
|
|
[PowerIconSize]: config.size.X200,
|
|
},
|
|
},
|
|
'300': {
|
|
vars: {
|
|
[PowerIconSize]: config.size.X300,
|
|
},
|
|
},
|
|
'400': {
|
|
vars: {
|
|
[PowerIconSize]: config.size.X400,
|
|
},
|
|
},
|
|
'500': {
|
|
vars: {
|
|
[PowerIconSize]: config.size.X500,
|
|
},
|
|
},
|
|
'600': {
|
|
vars: {
|
|
[PowerIconSize]: config.size.X600,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
size: '400',
|
|
},
|
|
});
|
|
|
|
export type PowerIconVariants = RecipeVariants<typeof PowerIcon>;
|