@szum-tech/design-system/tailwind/typography.css

Szum-Tech design system with tailwindcss support

@import "tailwindcss";

/* ========================================
   THEME CONFIGURATION - Tailwind v4
   ======================================== */
@theme {
  --font-poppins: "Poppins", sans-serif;
  --font-code: "JetBrains Mono", monospace;

  /* Font Sizes - Display Variants */
  --font-size-display-xl: 4.5rem; /* 72px */
  --font-size-display-lg: 3.75rem; /* 60px */
  --font-size-display-md: 3rem; /* 48px */
  --font-size-display-sm: 2.25rem; /* 36px */

  /* Font Sizes - Headings */
  --font-size-heading-h1: 2rem; /* 32px */
  --font-size-heading-h2: 1.5rem; /* 24px */
  --font-size-heading-h3: 1.25rem; /* 20px */
  --font-size-heading-h4: 1.125rem; /* 18px */

  /* Font Sizes - Body */
  --font-size-body-xl: 1.25rem; /* 20px */
  --font-size-body-lg: 1.125rem; /* 18px */
  --font-size-body-default: 1rem; /* 16px */
  --font-size-body-sm: 0.875rem; /* 14px */
  --font-size-body-xs: 0.75rem; /* 12px */

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.7;

  /* Letter Spacing */
  --letter-spacing-tighter: -0.02em;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;
}

/* ========================================
   UTILITY CLASSES - Tailwind v4 Style
   ======================================== */
/* Display Variants */
@utility text-display-xl {
  @apply text-(length:--font-size-display-md) leading-(--line-height-tight) font-extrabold tracking-(--letter-spacing-tighter) md:text-(length:--font-size-display-xl);
  /*font-size: var(--font-size-display-xl);*/
  /*line-height: var(--line-height-tight);*/
  /*font-weight: 800;*/
  /*letter-spacing: var(--letter-spacing-tighter);*/
}

@utility text-display-lg {
  @apply text-[2.5rem] leading-(--line-height-tight) font-extrabold tracking-(--letter-spacing-tighter) md:text-(length:--font-size-display-lg);
  /*font-size: var(--font-size-display-lg);*/
  /*line-height: var(--line-height-tight);*/
  /*font-weight: 800;*/
  /*letter-spacing: var(--letter-spacing-tighter);*/
}

@utility text-display-md {
  @apply text-[2rem] leading-[1.15] font-bold tracking-(--letter-spacing-tighter) md:text-(length:--font-size-display-md);
  /*font-size: var(--font-size-display-md);*/
  /*line-height: 1.15;*/
  /*font-weight: 700;*/
  /*letter-spacing: var(--letter-spacing-tighter);*/
}

@utility text-display-sm {
  @apply text-[1.75rem] leading-(--line-height-snug) font-bold tracking-(--letter-spacing-tight) md:text-(length:--font-size-display-sm);
  /*font-size: var(--font-size-display-sm);*/
  /*line-height: var(--line-height-snug);*/
  /*font-weight: 700;*/
  /*letter-spacing: var(--letter-spacing-tight);*/
}

/* Heading Variants */
@utility text-heading-h1 {
  @apply text-[1.75rem] leading-[1.25] font-bold tracking-(--letter-spacing-tight) md:text-(length:--font-size-heading-h1);
  /*font-size: var(--font-size-heading-h1);*/
  /*line-height: 1.25;*/
  /*font-weight: 700;*/
  /*letter-spacing: var(--letter-spacing-tight);*/
}

@utility text-heading-h2 {
  @apply text-[1.375rem] leading-[1.3] font-semibold tracking-(--letter-spacing-tight) md:text-(length:--font-size-heading-h2);
  /*font-size: var(--font-size-heading-h2);*/
  /*line-height: 1.3;*/
  /*font-weight: 600;*/
  /*letter-spacing: var(--letter-spacing-tight);*/
}

.text-heading-h3 {
  @apply text-[1.125rem] leading-(--line-height-normal) font-semibold tracking-[-0.005em] md:text-(length:--font-size-heading-h3);
  /*font-size: var(--font-size-heading-h3);*/
  /*line-height: var(--line-height-normal);*/
  /*font-weight: 600;*/
  /*letter-spacing: -0.005em;*/
}

@utility text-heading-h4 {
  @apply text-[1rem] leading-(--line-height-normal) font-semibold tracking-(--letter-spacing-normal) md:text-(length:--font-size-heading-h4);
  /*font-size: var(--font-size-heading-h4);*/
  /*line-height: var(--line-height-normal);*/
  /*font-weight: 600;*/
  /*letter-spacing: var(--letter-spacing-normal);*/
}

/* Body Variants */
@utility text-body-xl {
  @apply text-(length:--font-size-body-xl) leading-(--line-height-relaxed) font-normal;
  /*font-size: var(--font-size-body-xl);*/
  /*line-height: var(--line-height-relaxed);*/
  /*font-weight: 400;*/
}

@utility text-body-lg {
  @apply text-(length:--font-size-body-lg) leading-(--line-height-relaxed) font-normal;
  /*font-size: var(--font-size-body-lg);*/
  /*line-height: var(--line-height-relaxed);*/
  /*font-weight: 400;*/
}

@utility text-body-default {
  @apply text-(length:--font-size-body-default) leading-(--line-height-relaxed) font-normal;
  /*font-size: var(--font-size-body-default);*/
  /*line-height: var(--line-height-relaxed);*/
  /*font-weight: 400;*/
}

@utility text-body-sm {
  @apply text-(length:--font-size-body-sm) leading-[1.5] font-normal;
  /*font-size: var(--font-size-body-sm);*/
  /*line-height: 1.5;*/
  /*font-weight: 400;*/
}

@utility text-body-xs {
  @apply text-(length:--font-size-body-xs) leading-[1.5] font-normal;
  /*font-size: var(--font-size-body-xs);*/
  /*line-height: 1.5;*/
  /*font-weight: 400;*/
}

/* Special Text Types */
@utility text-lead {
  @apply text-muted-foreground text-(length:--font-size-body-xl) leading-(--line-height-loose) font-normal;
  /*font-size: var(--font-size-body-xl);*/
  /*line-height: var(--line-height-loose);*/
  /*font-weight: 400;*/
  /*color: var(--muted-foreground);*/
}

@utility text-mute {
  @apply text-muted-foreground text-(length:--font-size-body-sm) leading-[1.5] font-normal;
  /*font-size: var(--font-size-body-sm);*/
  /*line-height: 1.5;*/
  /*font-weight: 400;*/
  /*color: var(--muted-foreground);*/
}

@utility text-small {
  @apply text-muted-foreground text-(length:--font-size-body-xs) leading-[1.4] font-normal;
  /*font-size: var(--font-size-body-xs);*/
  /*line-height: 1.4;*/
  /*font-weight: 400;*/
  /*color: var(--muted-foreground);*/
}

@utility text-code {
  @apply font-code bg-muted text-foreground rounded px-1.5 py-0.5 text-[0.875em] leading-[1.5] font-medium;
  /*font-family: var(--font-code), serif;*/
  /*font-size: 0.875em;*/
  /*padding: 0.125rem 0.375rem;*/
  /*background: var(--muted);*/
  /*border-radius: var(--radius);*/
  /*color: var(--foreground);*/
  /*font-weight: 500;*/
}

@utility text-blockquote {
  @apply text-muted-foreground border-border border-l-2 pl-4 text-[1rem] leading-(--line-height-relaxed);
  /*font-size: 1rem;*/
  /*line-height: var(--line-height-relaxed);*/
  /*font-style: italic;*/
  /*border-left: 2px solid var(--border);*/
  /*padding-left: 1rem;*/
  /*color: var(--muted-foreground);*/
}