@veracity/vui/dist/prose/prose.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { th } from "../core/theme.js";
import styled from "../core/styled.js";
import { Box } from "../box/box.js";

//#region src/prose/prose.tsx
const Prose = styled(Box)`
  --vui-prose-link-transition-duration: 0.5s;
  --vui-prose-list-margin: ${th.space(2)};
  --vui-prose-list-padding-left: ${th.space(4)};
  --vui-prose-nested-list-margin: ${th.space(.5)};
  --vui-prose-link-color: ${th.color("seaBlue.main")};
  --vui-prose-link-hover-color: ${th.color("seaBlue.35")};
  --vui-prose-bold-font-weight: ${th.fontWeight("bold")};

  display: block;

  /* Paragraphs one after another */
  p + p {
    margin-top: ${th.space(2)};
  }

  /* Bold text */
  b,
  strong {
    font-weight: var(--vui-prose-bold-font-weight);
  }

  /* Unordered lists */
  ul {
    margin: var(--vui-prose-list-margin) 0;
    padding-left: var(--vui-prose-list-padding-left);
    list-style-type: disc;
  }

  /* Ordered lists */
  ol {
    margin: var(--vui-prose-list-margin) 0;
    padding-left: var(--vui-prose-list-padding-left);
    list-style-type: decimal;
  }

  /* List items */
  li {
    line-height: 1.6;
    &::marker {
      color: currentColor;
    }
  }

  /* Nested lists */
  ul ul,
  ol ul {
    list-style-type: circle;
    margin: var(--vui-prose-nested-list-margin) 0;
  }

  ul ul ul,
  ol ul ul {
    list-style-type: square;
  }

  /* Emphasis */
  em,
  i {
    font-style: italic;
  }

  /* Links - as in Link component */
  a {
    color: var(--vui-prose-link-color);
    cursor: pointer;
    padding-bottom: 2px;
    position: relative;
    text-decoration: none;

    background: linear-gradient(to right, currentcolor, currentcolor);
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;

    transition: color var(--vui-prose-link-transition-duration) ease;

    &:hover,
    &:focus {
      animation: linkSwipe var(--vui-prose-link-transition-duration) ease forwards;
      background-size: 100% 1px;
      color: var(--vui-prose-link-hover-color);
    }

    &[target='_blank']::after,
    &[rel~='external']::after,
    &[rel~='noopener']::after {
      content: '';
      display: inline-block;
      position: absolute;
      width: 1rem;
      height: 1rem;

      background-color: currentColor;

      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 512 512' %3E%3Cpath d='M440 256h-16a8 8 0 0 0-8 8v200a16 16 0 0 1-16 16H48a16 16 0 0 1-16-16V112a16 16 0 0 1 16-16h200a8 8 0 0 0 8-8V72a8 8 0 0 0-8-8H48a48 48 0 0 0-48 48v352a48 48 0 0 0 48 48h352a48 48 0 0 0 48-48V264a8 8 0 0 0-8-8ZM500 0 364 .34a12 12 0 0 0-12 12v10a12 12 0 0 0 12 12l90-.34.7.71-323.19 323.15a12 12 0 0 0 0 17l5.66 5.66a12 12 0 0 0 17 0L477.29 57.34l.71.7-.34 90a12 12 0 0 0 12 12h10a12 12 0 0 0 12-12L512 12a12 12 0 0 0-12-12Z'/%3E%3C/svg%3E%0A");
      mask-repeat: no-repeat;
      mask-size: contain;
    }

    &[target='_blank'],
    &[rel~='external'],
    &[rel~='noopener'] {
      margin-right: 1.5rem;
      &::after {
        transform: translate(4px, 3px);
      }
    }
  }

  @keyframes linkSwipe {
    from {
      background-size: 0 1px;
    }
    to {
      background-size: 100% 1px;
    }
  }
`;
Prose.displayName = "Prose";

//#endregion
export { Prose, Prose as default };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=prose.js.map