@lobehub/ui/es/base-ui/Tag/style.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

import { staticStylish } from "../../styles/theme/customStylishStatic.mjs";
import { createStaticStyles } from "antd-style";
import { cva } from "class-variance-authority";
//#region src/base-ui/Tag/style.ts
const styles = createStaticStyles(({ css, cssVar }) => ({
	borderless: staticStylish.variantBorderlessWithoutHover,
	close: css`
    cursor: pointer;

    display: inline-flex;
    gap: 0;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;
    border: none;

    color: ${cssVar.colorIcon};

    background: none;

    &:hover {
      color: ${cssVar.colorTextHeading};
    }
  `,
	filled: staticStylish.variantFilledWithoutHover,
	large: css`
    height: 28px;
    padding-inline: 12px;
    border-radius: 6px;
  `,
	middle: css`
    height: 22px;
    padding-inline: 8px;
    border-radius: 3px;
  `,
	outlined: staticStylish.variantOutlinedWithoutHover,
	round: css`
    && {
      border-radius: 999px;
    }
  `,
	roundLarge: css`
    padding-inline: 14px;
  `,
	roundMiddle: css`
    padding-inline: 10px;
  `,
	roundSmall: css`
    padding-inline: 8px;
  `,
	root: css`
    user-select: none;

    display: inline-flex;
    gap: 0.4em;
    align-items: center;
    justify-content: center;

    width: fit-content;
    margin: 0;

    font-size: ${cssVar.fontSizeSM};
    line-height: 1.2;
    white-space: nowrap;

    span {
      margin: 0;
      line-height: inherit;
    }
  `,
	small: css`
    height: 20px;
    padding-inline: 4px;
    border-radius: 3px;
  `
}));
const variants = cva(styles.root, {
	compoundVariants: [
		{
			className: styles.roundSmall,
			shape: "round",
			size: "small"
		},
		{
			className: styles.roundMiddle,
			shape: "round",
			size: "middle"
		},
		{
			className: styles.roundLarge,
			shape: "round",
			size: "large"
		}
	],
	defaultVariants: {
		shape: "normal",
		size: "middle",
		variant: "filled"
	},
	variants: {
		shape: {
			normal: null,
			round: styles.round
		},
		size: {
			large: styles.large,
			middle: styles.middle,
			small: styles.small
		},
		variant: {
			borderless: styles.borderless,
			filled: styles.filled,
			outlined: styles.outlined,
			solid: styles.filled
		}
	}
});
//#endregion
export { styles, variants };

//# sourceMappingURL=style.mjs.map