Text

Source

Text.css

Example

html

<div class="x-text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

More examples can be found in the Winduum docs.

Example CSS

css

@import "winduum/src/components/text/props/default.css" layer(theme);
@import "winduum/src/components/text/default.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-text-content-bold: var(--font-weight-semibold);
    --x-text-content-margin-block: calc(var(--spacing) * 5);
  }
}

Winduum CSS Code

winduum/src/components/text/props/default.css

css

:root, :host {
  --x-text-content-bold: var(--font-weight-semibold);
  --x-text-content-margin-block: calc(var(--spacing) * 5);
  --x-text-list-marker-size: 0.375em;
  --x-text-line-height: calc(1em + 0.75rem);
  --x-text-hr-margin-block: 3em;
  --x-text-heading-line-height: calc(1em + 0.375rem);
  --x-text-heading-margin-block: 1.5em 0.5em;
}

winduum/src/components/text/default.css

css

.x-text {
  font-family: var(--x-text-font-family);
  font-weight: var(--x-text-font-weight);
  font-size: var(--x-text-font-size);
  line-height: var(--x-text-line-height);
  letter-spacing: var(--x-text-letter-spacing);
  text-wrap: pretty;

  > :is(*:first-child) {
    margin-block-start: 0;
  }

  > :is(*:last-child) {
    margin-block-end: 0;
  }

  :where(b, strong) {
    font-weight: var(--x-text-content-bold);
  }

  :where(em) {
    font-style: italic;
  }

  :where(img) {
    display: block;
    height: auto;
  }

  :where(p) {
    margin-block: var(--x-text-p-margin-block, var(--x-text-content-margin-block));

    &:empty {
      line-height: 0;
      margin: 0;

      &::after {
        content: "\00a0";
      }
    }
  }

  :where(hr) {
    margin-block: var(--x-text-hr-margin-block);
    background-color:
      color-mix(
        in var(--x-text-hr-background-color-space, srgb),
        var(--x-text-hr-background-color, currentColor) var(--x-text-hr-background-color-opacity, 10%),
        var(--x-text-hr-background-color-mix, transparent)
      );
  }

  :where(a) {
    color: var(--x-text-link-color, var(--color-accent));
    text-decoration: var(--x-text-link-text-decoration, underline);
    transition: var(--transition-color);

    &:hover {
      color:
        color-mix(
          in var(--x-text-link-hover-color-space, srgb),
          var(--x-text-link-hover-color, var(--color-accent)) var(--x-text-link-hover-color-opacity, 75%),
          var(--x-text-link-hover-color-mix, transparent)
        );
    }

    &:focus-visible {
      color:
        color-mix(
          in var(--x-text-link-focus-color-space, srgb),
          var(--x-text-link-focus-color, var(--color-accent)) var(--x-text-link-focus-color-opacity, 75%),
          var(--x-text-link-focus-color-mix, transparent)
        );
    }
  }

  :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--x-text-heading-font-family);
    font-weight: var(--x-text-heading-font-weight, var(--x-text-content-bold));
    font-size: var(--x-text-heading-font-size);
    line-height: var(--x-text-heading-line-height);
    letter-spacing: var(--x-text-heading-letter-spacing);
    margin-block: var(--x-text-heading-margin-block);
    color: var(--x-text-heading-color);
    text-wrap: balance;
  }

  :where(h1) {
    --x-text-heading-font-size: var(--x-text-heading-1-font-size, var(--text-4xl));
  }

  :where(h2) {
    --x-text-heading-font-size: var(--x-text-heading-2-font-size, var(--text-3xl));
  }

  :where(h3) {
    --x-text-heading-font-size: var(--x-text-heading-3-font-size, var(--text-2xl));
  }

  :where(h4) {
    --x-text-heading-font-size: var(--x-text-heading-4-font-size, var(--text-xl));
  }

  :where(h5) {
    --x-text-heading-font-size: var(--x-text-heading-5-font-size, var(--text-lg));
  }

  :where(h6) {
    --x-text-heading-font-size: var(--x-text-heading-6-font-size);
  }

  :where(table) {
    border: 0;
    min-inline-size: 100%;

    :where(td, th) {
      padding: var(--x-text-table-cell-padding-block, 1em) var(--x-text-table-cell-padding-inline, 1.25em);
      text-align: left;
    }

    :where(thead) {
      font-weight: var(--x-text-table-thead-font-weight, var(--x-text-content-bold));
      border-block-end:
        1px solid color-mix(
          in var(--x-text-table-thead-border-color-space, srgb),
          var(--x-text-table-thead-border-color, currentColor) var(--x-text-table-thead-border-color-opacity, 10%),
          var(--x-text-table-thead-border-color-mix, transparent)
        );
    }

    :where(tbody tr) {
      &:nth-of-type(even) {
        background-color:
          color-mix(
            in var(--x-text-table-row-even-background-color-space, srgb),
            var(--x-text-table-row-even-background-color, currentColor) var(--x-text-table-row-even-background-color-opacity, 5%),
            var(--x-text-table-row-even-background-color-mix, transparent)
          );
      }
    }
  }

  :where(ol, ul) {
    margin-inline-start: var(--x-text-list-margin-inline-start, 0.75em);
    padding-inline-start: var(--x-text-list-padding-inline-start, 1em);
    margin-block: var(--x-text-list-margin-block, var(--x-text-content-margin-block));

    :where(li) {
      margin-block: var(--x-text-list-item-margin-block, 0.5em);
      padding-inline-start: var(--x-text-list-item-padding-inline-start, 1ch);
    }
  }

  :where(ol) {
    &:not([type]) {
      list-style: decimal;
    }

    & :where(li) {
      &::marker {
        color: var(--x-text-list-marker-color, var(--color-accent));
        font-weight: var(--x-text-list-marker-font-weight, var(--x-text-content-bold));
      }
    }
  }

  :where(ul) {
    :where(li) {
      position: relative;
      list-style-type: "";

      &::before {
        inline-size: var(--x-text-list-marker-size);
        block-size: var(--x-text-list-marker-size);
        inset-inline-start: var(--x-text-list-marker-inset-inline-start, -0.75em);
        inset-block-start: var(--x-text-list-marker-inset-block-start, 0.5lh);
        border:
          var(--x-text-list-marker-border-width, 1px) solid
          var(--x-text-list-marker-border-color, var(--color-accent));
        background-color: var(--x-text-list-marker-background-color, var(--color-accent));
        margin-inline-start: calc((var(--x-text-list-marker-size) / 2) * -1);
        margin-block-start: calc(var(--x-text-list-marker-size) / 2 * -1);
        border-radius: var(--x-text-list-marker-border-radius, 50%);
        mask: var(--x-text-list-marker-mask);
        position: absolute;
        will-change: transform;
        content: "";
      }
    }

    &[style*="square"] {
      --x-text-list-marker-border-radius: 0;
    }

    &[style*="circle"] {
      --x-text-list-marker-background-color: transparent;
    }
  }

  :where(blockquote) {
    border-inline-start:
      var(--x-text-blockquote-border-inline-start-width, 0.375em) solid
      var(--x-text-blockquote-border-inline-start-color, var(--color-accent));
    margin-block: var(--x-text-blockquote-margin-block, var(--x-text-content-margin-block));
    padding: var(--x-text-blockquote-padding-block, 0.5em) var(--x-text-blockquote-padding-inline, 1.25em);
    font-size: var(--x-text-blockquote-font-size, inherit);
  }

  :where(code) {
    font-size: var(--x-text-code-font-size, 87.5%);
  }

  :where(figure) {
    margin-block: var(--x-text-figure-margin-block, var(--x-text-content-margin-block));
  }

  :where(figcaption) {
    font-size: var(--x-text-figcaption-font-size, 87.5%);
    font-weight: var(--x-text-figcaption-font-weight, var(--font-weight-semibold));
    line-height: var(--x-text-figcaption-line-height, 1.5);
    margin-block-start: var(--x-text-figcaption-margin-block-start, 0.5em);
  }
}

Text ​

Source ​

Example ​

Example CSS ​

Winduum CSS Code ​

winduum/src/components/text/props/default.css ​

winduum/src/components/text/default.css ​

Text

Source

Example

Example CSS

Winduum CSS Code

winduum/src/components/text/props/default.css

winduum/src/components/text/default.css