From f2ebccb89dd45b6224e324c382ac3712e171d929 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 16 Dec 2025 12:33:19 +0530
Subject: [PATCH] feat: Add typography utility classes (#13075)

---
 .../dashboard/assets/scss/_woot.scss          | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)

diff --git a/app/javascript/dashboard/assets/scss/_woot.scss b/app/javascript/dashboard/assets/scss/_woot.scss
index 36e1b2341..6404da88d 100644
--- a/app/javascript/dashboard/assets/scss/_woot.scss
+++ b/app/javascript/dashboard/assets/scss/_woot.scss
@@ -66,4 +66,82 @@ body {
     -ms-overflow-style: none; /* IE and Edge */
     scrollbar-width: none; /* Firefox */
   }
+
+  /**
+   * ============================================================================
+   * TYPOGRAPHY UTILITIES
+   * ============================================================================
+   *
+   * | Class              | Use Case                                           |
+   * |--------------------|----------------------------------------------------|
+   * | .text-body-main    | <p>, <span>, general body text                     |
+   * | .text-body-para    | <p> for paragraphs, larger text blocks             |
+   * | .text-heading-1    | <h1>, page titles, panel headers                   |
+   * | .text-heading-2    | <h2>, section headings, card titles                |
+   * | .text-heading-3    | <h3>, card headings, breadcrumbs, subsections      |
+   * | .text-label        | <label>, form labels, field names                  |
+   * | .text-label-small  | <small>, footnotes, tags, badges, captions         |
+   * | .text-button       | <button>, standard button text                     |
+   * | .text-button-small | <button>, small/compact button text                |
+   */
+
+  /* body-text-main: Main text style for general body text */
+  .text-body-main {
+    @apply font-inter text-sm font-normal;
+    line-height: 21px; /* 150% */
+    letter-spacing: -0.28px;
+  }
+
+  /* body-text-paragraph: For paragraphs or larger blocks of text */
+  .text-body-para {
+    @apply font-inter text-sm font-420;
+    line-height: 21px; /* 150% */
+    letter-spacing: -0.21px;
+  }
+
+  /* heading-1: Large heading for pages and panels */
+  .text-heading-1 {
+    @apply font-interDisplay text-base font-medium;
+    line-height: 24px; /* 150% */
+  }
+
+  /* heading-2: Secondary heading for sections */
+  .text-heading-2 {
+    @apply font-interDisplay text-sm font-medium;
+    line-height: 21px; /* 150% */
+  }
+
+  /* heading-3: For card headings, breadcrumbs, subsections */
+  .text-heading-3 {
+    @apply font-interDisplay text-sm font-medium;
+    line-height: 21px; /* 150% */
+    letter-spacing: 0.14px;
+  }
+
+  /* label: Standard label text for form fields */
+  .text-label {
+    @apply font-inter text-sm font-medium;
+    line-height: 21px; /* 150% */
+  }
+
+  /* label-small: Smallest font for labels, footnotes, tags */
+  .text-label-small {
+    @apply font-inter text-xs font-440;
+    line-height: 16px; /* 133.333% */
+    letter-spacing: -0.24px;
+  }
+
+  /* button-text: Text for standard size buttons */
+  .text-button {
+    @apply font-inter text-sm font-460;
+    line-height: 21px; /* 150% */
+    letter-spacing: -0.28px;
+  }
+
+  /* button-text-small: Text for smaller buttons */
+  .text-button-small {
+    @apply font-inter text-xs font-440;
+    line-height: 18px; /* 150% */
+    letter-spacing: -0.24px;
+  }
 }