74 lines
1.6 KiB
TypeScript
74 lines
1.6 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-block',
|
||
|
|
flexShrink: 0,
|
||
|
|
width: toRem(16),
|
||
|
|
height: toRem(16),
|
||
|
|
backgroundColor: color.Surface.OnContainer,
|
||
|
|
borderRadius: config.radii.Pill,
|
||
|
|
border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
|
||
|
|
});
|
||
|
|
|
||
|
|
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>;
|