@casoon/dragonfly/utilities/helpers/text.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/*
 * Text Utilities
 *
 * Atomare CSS-Klassen für Textformatierung, Schriftgröße, -gewicht, etc.
 */

@layer utilities.helpers {
  /* ================= FONT SIZE ================= */
  .text-xs { font-size: var(--font-size-xs); }

  .text-sm { font-size: var(--font-size-sm); }

  .text-base { font-size: var(--font-size-base); }

  .text-lg { font-size: var(--font-size-lg); }

  .text-xl { font-size: var(--font-size-xl); }

  .text-2xl { font-size: var(--font-size-2xl); }

  .text-3xl { font-size: var(--font-size-3xl); }

  .text-4xl { font-size: var(--font-size-4xl); }

  .text-5xl { font-size: var(--font-size-5xl); }

  /* ================= FONT WEIGHT ================= */
  .font-normal { font-weight: var(--font-weight-normal); }

  .font-medium { font-weight: var(--font-weight-medium); }

  .font-semibold { font-weight: var(--font-weight-semibold); }

  .font-bold { font-weight: var(--font-weight-bold); }

  /* ================= LINE HEIGHT ================= */
  .leading-none { line-height: var(--line-height-none); }

  .leading-tight { line-height: var(--line-height-tight); }

  .leading-snug { line-height: var(--line-height-snug); }

  .leading-normal { line-height: var(--line-height-normal); }

  .leading-relaxed { line-height: var(--line-height-relaxed); }

  .leading-loose { line-height: var(--line-height-loose); }

  /* ================= TEXT ALIGNMENT ================= */
  .text-center { text-align: center; }

  .text-left { text-align: left; }

  .text-right { text-align: right; }

  .text-justify { text-align: justify; }

  /* ================= TEXT WRAPPING ================= */
  .text-balance { text-wrap: balance; }

  .text-pretty { text-wrap: pretty; }

  .whitespace-normal { white-space: normal; }

  .whitespace-nowrap { white-space: nowrap; }

  .whitespace-pre { white-space: pre; }

  .whitespace-pre-line { white-space: pre-line; }

  .whitespace-pre-wrap { white-space: pre-wrap; }

  /* ================= TEXT TRANSFORM ================= */
  .uppercase { text-transform: uppercase; }

  .lowercase { text-transform: lowercase; }

  .capitalize { text-transform: capitalize; }

  .normal-case { text-transform: none; }

  /* ================= TEXT DECORATION ================= */
  .underline { text-decoration: underline; }

  .no-underline { text-decoration: none; }

  .line-through { text-decoration: line-through; }

  /* ================= TEXT OVERFLOW ================= */
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .text-ellipsis { text-overflow: ellipsis; }

  .text-clip { text-overflow: clip; }

  /* ================= FONT STYLE ================= */
  .italic { font-style: italic; }

  .not-italic { font-style: normal; }

  /* ================= TEXT COLOR ================= */
  .text-current { color: currentColor; }
}