@lobehub/ui/es/Highlighter/SyntaxHighlighter/style.mjs

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

import { createStaticStyles, cx, keyframes } from "antd-style";
import { cva } from "class-variance-authority";

//#region src/Highlighter/SyntaxHighlighter/style.ts
const fadeIn = keyframes`
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  `;
const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
	return {
		animated: css$1`
      .animate-fade-in,
      span.line > span,
      code:not(:has(span.line)) {
        opacity: 1;
        animation: ${fadeIn} 1s ease-in-out;
      }
    `,
		noBackground: css$1`
      pre {
        background: transparent !important;
      }
    `,
		noPadding: css$1`
      pre {
        padding: 0;
      }
    `,
		padding: css$1`
      pre {
        padding: 16px;
      }
    `,
		root: css$1`
      direction: ltr;
      margin: 0;
      padding: 0;
      text-align: start;

      pre {
        overflow-x: auto;
        margin: 0;
      }
    `,
		shiki: cx("ant-highlighter-highlighter-shiki", css$1`
        pre {
          user-select: none;

          code {
            display: flex;
            flex-direction: column;
            gap: 4px;

            .line {
              user-select: text;

              display: block;

              width: calc(100% + 32px);
              margin-block: 0;
              margin-inline: -16px;
              padding-block: 0;
              padding-inline: 16px;
            }
          }

          &.has-focused {
            .line:not(.focused) {
              opacity: 0.5;
            }
          }

          .highlighted {
            background: ${cssVar$1.colorFillTertiary};

            &.warning {
              background: ${cssVar$1.colorWarningBg};
            }

            &.error {
              background: ${cssVar$1.colorErrorBg};
            }
          }

          .highlighted-word {
            padding-block: 0.1em;
            padding-inline: 0.2em;
            border: 1px solid ${cssVar$1.colorBorderSecondary};
            border-radius: ${cssVar$1.borderRadius};

            background: ${cssVar$1.colorFillTertiary};
          }

          .diff {
            &.remove {
              background: ${cssVar$1.colorErrorBg};

              &::before {
                content: '-';

                position: absolute;
                inset-inline-start: 4px;

                display: inline-block;

                color: ${cssVar$1.colorErrorText};
              }
            }

            &.add {
              background: ${cssVar$1.colorSuccessBg};

              &::before {
                content: '+';

                position: absolute;
                inset-inline-start: 4px;

                display: inline-block;

                color: ${cssVar$1.colorSuccessText};
              }
            }
          }
        }
      `),
		unshiki: css$1`
      color: ${cssVar$1.colorTextDescription};
    `
	};
});
const variants = cva(styles.root, {
	defaultVariants: {
		animated: false,
		shiki: true,
		showBackground: false,
		variant: "borderless"
	},
	variants: {
		shiki: {
			false: styles.unshiki,
			true: styles.shiki
		},
		showBackground: {
			false: styles.noBackground,
			true: null
		},
		animated: {
			true: styles.animated,
			false: null
		},
		variant: {
			filled: styles.padding,
			outlined: styles.padding,
			borderless: styles.noPadding
		}
	}
});

//#endregion
export { variants };
//# sourceMappingURL=style.mjs.map