@senka-ai/ui/dist/typography.css

A modern, type-safe Svelte 5 UI component library with full theme support, accessibility standards, and robust state management patterns

/* ===========================================
   TYPOGRAPHY SYSTEM - Based on Text.jpg
   =========================================== */

/* Typography Variables */
:root {
  /* Font sizes */
  --font-size-10: 0.625rem; /* 10px */
  --font-size-12: 0.75rem;  /* 12px */
  --font-size-14: 0.875rem; /* 14px */
  --font-size-16: 1rem;     /* 16px */
  --font-size-18: 1.125rem; /* 18px */
  --font-size-24: 1.5rem;   /* 24px */

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
}

/* ===========================================
   HEADING STYLES
   =========================================== */

.text-h1 {
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
}

.text-h2 {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
}

.text-h3 {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
}

.text-h4 {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.text-h5 {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* ===========================================
   BODY TEXT STYLES
   =========================================== */

.text-body-xl {
  font-size: var(--font-size-18);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.text-body-l {
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.text-body-m {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.text-body-s {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
}

.text-body-xs {
  font-size: var(--font-size-10);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

/* ===========================================
   ACTION TEXT STYLES (for buttons, links)
   =========================================== */

.text-action-l {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.text-action-m {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.text-action-s {
  font-size: var(--font-size-10);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* ===========================================
   CAPTION TEXT STYLES
   =========================================== */

.text-caption-m {
  font-size: var(--font-size-10);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}
.text-caption-l {
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}