chore: Adjust WDS typography (add letter-spacing to text) (#40084)

## Description

Fixes #39969 

| Before | After |
|--------|--------|
| <img width="721" alt="Screenshot 2025-04-04 at 11 09 24"
src="https://github.com/user-attachments/assets/dcf22c9d-b811-4f9b-9a1c-87190d6f37a3"
/> | <img width="717" alt="Screenshot 2025-04-04 at 11 08 37"
src="https://github.com/user-attachments/assets/ce0f7d77-4620-47d1-ab81-7cd5f43a6f93"
/> |
| <img width="682" alt="Screenshot 2025-04-04 at 11 06 48"
src="https://github.com/user-attachments/assets/66123d95-ad50-4ed1-a70e-f84831ccc918"
/> | <img width="707" alt="Screenshot 2025-04-04 at 11 08 27"
src="https://github.com/user-attachments/assets/b1136e38-38f5-43d3-accb-979f25499dd3"
/> |

## Automation

/ok-to-test tags="@tag.Sanity"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!WARNING]
> Tests have not run on the HEAD
5f038643a0e948e91a9942a8d8f6e4315b8a8f89 yet
> <hr>Fri, 04 Apr 2025 09:05:05 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Style**
- Refined heading typography with updated font weights for improved
visual hierarchy.
	- Enhanced text components with additional styling attributes.
- Introduced specific letter-spacing adjustments for various text styles
to improve readability.
- Added letter-spacing property to markdown elements for better
typographic control in tables and lists.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Pawan Kumar <pawan@appsmith.com>

app/client/packages/design-system/widgets/src/components/Markdown/src/mdComponents/Heading.tsx

@@ -14,7 +14,6 @@ const createHeading = (
 ) => {
   const HeadingComponent = ({ children, ref }: HeadingProps) => (
     <Text
-      color="neutral"
       data-component={`h${level}`}
       fontWeight={fontWeight}
       ref={ref as Ref<HTMLDivElement>}
@@ -30,9 +29,9 @@ const createHeading = (
   return HeadingComponent;
 };
 
-export const h1 = createHeading("heading", 1);
+export const h1 = createHeading("heading", 1, 600);
-export const h2 = createHeading("title", 2);
+export const h2 = createHeading("title", 2, 600);
-export const h3 = createHeading("subtitle", 3);
+export const h3 = createHeading("subtitle", 3, 600);
-export const h4 = createHeading("body", 4);
+export const h4 = createHeading("body", 4, 600);
 export const h5 = createHeading("body", 5, 500);
-export const h6 = createHeading("body", 6, 300);
+export const h6 = createHeading("caption", 6, 500);

app/client/packages/design-system/widgets/src/components/Markdown/src/styles.module.css

@@ -22,6 +22,7 @@
     vertical-align: top;
     border-bottom: var(--border-width-1) solid var(--color-bd);
     border-right: var(--border-width-1) solid var(--color-bd);
+    letter-spacing: -0.02em;
   }
 
   :is(td, th):last-child {
@@ -81,6 +82,7 @@
     margin-left: 1em;
     position: relative;
     list-style-type: auto;
+    letter-spacing: -0.02em;
   }
 
   a {
@@ -116,6 +118,7 @@
     padding-right: var(--inner-spacing-3);
     margin-left: 0;
     border-left: var(--border-width-2) solid var(--color-bd-neutral);
+    letter-spacing: -0.02em;
   }
 
   /* Images in markdown should be responsive and have a max height of 300px. Border radius is the same as button border radius */

app/client/packages/design-system/widgets/src/components/Text/src/Text.tsx

@@ -39,6 +39,8 @@ const _Text = (props: TextProps, ref: Ref<HTMLDivElement>) => {
     <div
       className={clsx(className, styles.text, getTypographyClassName(size))}
       data-color={color ? color : undefined}
+      data-variant={size}
+      data-weight={getFontWeight(fontWeight, isBold)}
       ref={ref}
       style={{
         fontWeight: getFontWeight(fontWeight, isBold),

app/client/packages/design-system/widgets/src/components/Text/src/styles.module.css

@@ -15,6 +15,41 @@
   &[data-color="neutral-subtle"] {
     color: var(--color-fg-neutral-subtle);
   }
+
+  /* body */
+  &[data-variant="body"] {
+    letter-spacing: -0.02em;
+  }
+
+  /* h6 */
+  &[data-variant="caption"][data-weight="500"] {
+    letter-spacing: -0.01em;
+  }
+
+  /* h5 */
+  &[data-variant="body"][data-weight="500"] {
+    letter-spacing: -0.02em;
+  }
+
+  /* h4 */
+  &[data-variant="body"][data-weight="600"] {
+    letter-spacing: -0.02em;
+  }
+
+  /* h3 */
+  &[data-variant="subtitle"][data-weight="600"] {
+    letter-spacing: -0.025em;
+  }
+
+  /* h2 */
+  &[data-variant="title"][data-weight="600"] {
+    letter-spacing: -0.03em;
+  }
+
+  /* h1 */
+  &[data-variant="heading"][data-weight="600"] {
+    letter-spacing: -0.04em;
+  }
 }
 
 .clampedText {