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

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

import { createStaticStyles, keyframes } from "antd-style";
import { cva } from "class-variance-authority";
//#region src/base-ui/Text/style.ts
const shine = keyframes`
  0% {
    background-position: 100%;
  }

  100% {
    background-position: -100%;
  }
`;
const sweep = keyframes`
  0% {
    translate: -100% 0;
  }

  100% {
    translate: 100% 0;
  }
`;
const styles = createStaticStyles(({ css, cssVar }) => ({
	code: css`
    font-family: ${cssVar.fontFamilyCode};
  `,
	danger: css`
    color: ${cssVar.colorError};
  `,
	delete: css`
    text-decoration: line-through;
  `,
	disabled: css`
    cursor: not-allowed;
    color: ${cssVar.colorTextDisabled};
  `,
	ellipsis: css`
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  `,
	ellipsisMulti: css`
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
  `,
	h1: css`
    font-size: calc(${cssVar.fontSize} * 2.5);
    font-weight: bold;
    line-height: 1.25;
  `,
	h2: css`
    font-size: calc(${cssVar.fontSize} * 2);
    font-weight: bold;
    line-height: 1.25;
  `,
	h3: css`
    font-size: calc(${cssVar.fontSize} * 1.5);
    font-weight: bold;
    line-height: 1.25;
  `,
	h4: css`
    font-size: calc(${cssVar.fontSize} * 1.25);
    font-weight: bold;
    line-height: 1.25;
  `,
	h5: css`
    font-size: ${cssVar.fontSize};
    font-weight: bold;
    line-height: 1.25;
  `,
	info: css`
    color: ${cssVar.colorInfo};
  `,
	italic: css`
    font-style: italic;
  `,
	mark: css`
    color: #000;
    background-color: ${cssVar.yellow};
  `,
	p: css`
    margin-block: 0;
  `,
	secondary: css`
    color: ${cssVar.colorTextDescription};
  `,
	shiny: css`
    --shiny-duration: 1.5s;

    user-select: none;

    color: color-mix(in srgb, ${cssVar.colorText} 28%, transparent);

    background: linear-gradient(120deg, transparent 25%, ${cssVar.colorText} 50%, transparent 75%);
    background-clip: text;
    background-size: 200% 100%;

    animation: ${shine} var(--shiny-duration) linear infinite;

    /* Animating background-position repaints every glyph each frame. Where
     * mask-clip: text is supported, clip a transform-animated overlay to the
     * glyphs instead so the sweep stays on the compositor. The mask clips every
     * descendant too, so rows that also render icons or chips keep the
     * background-clip path — masking would erase that non-text paint. */
    @supports (-webkit-mask-clip: text) {
      &:not(:has(*)) {
        position: var(--shiny-origin, relative);

        background: none;

        animation: none;

        /* stylelint-disable-next-line declaration-property-value-no-unknown */
        mask-clip: text;
        mask-image: linear-gradient(#fff, #fff);

        &::after {
          pointer-events: none;
          will-change: transform;
          content: '';

          position: absolute;
          inset: 0;

          background: linear-gradient(
            90deg,
            transparent 25%,
            ${cssVar.colorText} 50%,
            transparent 75%
          );

          animation: ${sweep} var(--shiny-duration) linear infinite;
        }
      }
    }

    @media (prefers-reduced-motion: reduce) {
      animation: none;

      &::after {
        display: none;
      }
    }
  `,
	strong: css`
    font-weight: bold;
  `,
	success: css`
    color: ${cssVar.colorSuccess};
  `,
	text: css`
    color: ${cssVar.colorText};
  `,
	underline: css`
    text-decoration: underline;
  `,
	warning: css`
    color: ${cssVar.colorWarning};
  `
}));
/**
* Coordinate layer for a row that shimmers several separate text spans. Each
* span's sweep overlay resolves against the nearest positioned ancestor, so
* dropping `position` on the spans and holding it here gives every span the
* same row-wide overlay — one continuous wave instead of one sweep per span.
*/
const groupStyles = createStaticStyles(({ css }) => ({ shinyGroup: css`
    @supports (-webkit-mask-clip: text) {
      & {
        --shiny-origin: static;

        position: relative;
      }
    }
  ` }));
const variants = cva(styles.text, {
	defaultVariants: {},
	variants: {
		as: {
			h1: styles.h1,
			h2: styles.h2,
			h3: styles.h3,
			h4: styles.h4,
			h5: styles.h5,
			p: styles.p
		},
		code: { true: styles.code },
		delete: { true: styles.delete },
		disabled: { true: styles.disabled },
		ellipsis: {
			multi: styles.ellipsisMulti,
			true: styles.ellipsis
		},
		italic: { true: styles.italic },
		mark: { true: styles.mark },
		shiny: { true: styles.shiny },
		strong: { true: styles.strong },
		type: {
			danger: styles.danger,
			info: styles.info,
			secondary: styles.secondary,
			success: styles.success,
			warning: styles.warning
		},
		underline: { true: styles.underline }
	}
});
//#endregion
export { groupStyles, styles, variants };

//# sourceMappingURL=style.mjs.map