@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
1 lines • 4.62 kB
Source Map (JSON)
{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../../src/Highlighter/SyntaxHighlighter/style.ts"],"sourcesContent":["import { createStaticStyles, cx, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst fadeIn = keyframes`\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n `;\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n animated: css`\n .animate-fade-in,\n span.line > span,\n code:not(:has(span.line)) {\n opacity: 1;\n animation: ${fadeIn} 1s ease-in-out;\n }\n `,\n\n noBackground: css`\n pre {\n background: transparent !important;\n }\n `,\n\n noPadding: css`\n pre {\n padding: 0;\n }\n `,\n\n padding: css`\n pre {\n padding: 16px;\n }\n `,\n root: css`\n direction: ltr;\n margin: 0;\n padding: 0;\n text-align: start;\n\n pre {\n overflow-x: auto;\n margin: 0;\n }\n `,\n shiki: cx(\n 'ant-highlighter-highlighter-shiki',\n css`\n pre {\n user-select: none;\n\n code {\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n .line {\n user-select: text;\n\n display: block;\n\n width: calc(100% + 32px);\n margin-block: 0;\n margin-inline: -16px;\n padding-block: 0;\n padding-inline: 16px;\n }\n }\n\n &.has-focused {\n .line:not(.focused) {\n opacity: 0.5;\n }\n }\n\n .highlighted {\n background: ${cssVar.colorFillTertiary};\n\n &.warning {\n background: ${cssVar.colorWarningBg};\n }\n\n &.error {\n background: ${cssVar.colorErrorBg};\n }\n }\n\n .highlighted-word {\n padding-block: 0.1em;\n padding-inline: 0.2em;\n border: 1px solid ${cssVar.colorBorderSecondary};\n border-radius: ${cssVar.borderRadius};\n\n background: ${cssVar.colorFillTertiary};\n }\n\n .diff {\n &.remove {\n background: ${cssVar.colorErrorBg};\n\n &::before {\n content: '-';\n\n position: absolute;\n inset-inline-start: 4px;\n\n display: inline-block;\n\n color: ${cssVar.colorErrorText};\n }\n }\n\n &.add {\n background: ${cssVar.colorSuccessBg};\n\n &::before {\n content: '+';\n\n position: absolute;\n inset-inline-start: 4px;\n\n display: inline-block;\n\n color: ${cssVar.colorSuccessText};\n }\n }\n }\n }\n `,\n ),\n unshiki: css`\n color: ${cssVar.colorTextDescription};\n `,\n };\n});\n\nexport const variants = cva(styles.root, {\n defaultVariants: {\n animated: false,\n shiki: true,\n showBackground: false,\n variant: 'borderless',\n },\n /* eslint-disable sort-keys-fix/sort-keys-fix */\n variants: {\n shiki: {\n false: styles.unshiki,\n true: styles.shiki,\n },\n showBackground: {\n false: styles.noBackground,\n true: null,\n },\n animated: {\n true: styles.animated,\n false: null,\n },\n variant: {\n filled: styles.padding,\n outlined: styles.padding,\n borderless: styles.noPadding,\n },\n },\n /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;AAGA,MAAM,SAAS,SAAS;;;;;;;;AASxB,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,UAAU,KAAG;;;;;qBAKI,OAAO;;;EAIxB,cAAc,KAAG;;;;;EAMjB,WAAW,KAAG;;;;;EAMd,SAAS,KAAG;;;;;EAKZ,MAAM,KAAG;;;;;;;;;;;EAWT,OAAO,GACL,qCACA,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA6BiBA,SAAO,kBAAkB;;;4BAGvBA,SAAO,eAAe;;;;4BAItBA,SAAO,aAAa;;;;;;;gCAOhBA,SAAO,qBAAqB;6BAC/BA,SAAO,aAAa;;0BAEvBA,SAAO,kBAAkB;;;;;4BAKvBA,SAAO,aAAa;;;;;;;;;;yBAUvBA,SAAO,eAAe;;;;;4BAKnBA,SAAO,eAAe;;;;;;;;;;yBAUzBA,SAAO,iBAAiB;;;;;QAM5C;EACD,SAAS,KAAG;eACDA,SAAO,qBAAqB;;EAExC;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,UAAU;EACV,OAAO;EACP,gBAAgB;EAChB,SAAS;EACV;CAED,UAAU;EACR,OAAO;GACL,OAAO,OAAO;GACd,MAAM,OAAO;GACd;EACD,gBAAgB;GACd,OAAO,OAAO;GACd,MAAM;GACP;EACD,UAAU;GACR,MAAM,OAAO;GACb,OAAO;GACR;EACD,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB;EACF;CAEF,CAAC"}