From a7ca872fe1c57ec7621307c6425bac184c190873 Mon Sep 17 00:00:00 2001
From: 01zulfi <85733202+01zulfi@users.noreply.github.com>
Date: Tue, 7 Jul 2026 12:24:38 +0500
Subject: [PATCH] theme: add fontsize, spacing, radius variables (#10062)

* theme: add fontsize, spacing, radius variables
Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

* Apply suggestion from @thecodrr

Signed-off-by: Abdullah Atta <thecodrr@protonmail.com>

* Apply suggestion from @thecodrr

Signed-off-by: Abdullah Atta <thecodrr@protonmail.com>

---------

Signed-off-by: Abdullah Atta <thecodrr@protonmail.com>
Co-authored-by: Abdullah Atta <abdullahatta@streetwriters.co>
---
 packages/theme/src/theme/font/fontsize.ts | 22 ++++++++-
 packages/theme/src/theme/index.ts         | 59 +++++++++++++++++++++--
 2 files changed, 77 insertions(+), 4 deletions(-)

diff --git a/packages/theme/src/theme/font/fontsize.ts b/packages/theme/src/theme/font/fontsize.ts
index 2e10ed61d..186dca4e5 100644
--- a/packages/theme/src/theme/font/fontsize.ts
+++ b/packages/theme/src/theme/font/fontsize.ts
@@ -27,7 +27,17 @@ export function getFontSizes(): FontSizes {
     body: "12px",
     subBody: "10px",
     menu: "12px",
-    code: "14px"
+    code: "14px",
+    xxxs: "10px",
+    xxs: "11px",
+    xs: "13px",
+    sm: "15px",
+    md: "17px",
+    lg: "20px",
+    xl: "25px",
+    "2xl": "30px",
+    "3xl": "35px",
+    "4xl": "40px"
   };
 }
 
@@ -41,4 +51,14 @@ export type FontSizes = {
   menu: string;
   subBody: string;
   code: string;
+  xxxs: string;
+  xxs: string;
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  "2xl": string;
+  "3xl": string;
+  "4xl": string;
 };
diff --git a/packages/theme/src/theme/index.ts b/packages/theme/src/theme/index.ts
index dc8c040a2..5a5cd4c7e 100644
--- a/packages/theme/src/theme/index.ts
+++ b/packages/theme/src/theme/index.ts
@@ -27,7 +27,22 @@ export { createButtonVariant } from "./variants/button.js";
 export { getFontConfig } from "./font/index.js";
 export type Theme = {
   breakpoints: string[];
-  space: (number | string)[] & { small?: number | string };
+  space: (number | string)[] & {
+    small?: number | string;
+    spacing1: number;
+    spacing2: number;
+    spacing3: number;
+    spacing4: number;
+    spacing5: number;
+    spacing6: number;
+    spacing7: number;
+    spacing8: number;
+    spacing9: number;
+    spacing10: number;
+    spacing11: number;
+    spacing12: number;
+    spacing13: number;
+  };
   sizes: { full: "100%"; half: "50%" };
   radii: {
     none: number;
@@ -35,6 +50,15 @@ export type Theme = {
     dialog: number;
     large: number;
     small: number;
+    radius1: number;
+    radius2: number;
+    radius3: number;
+    radius4: number;
+    radius5: number;
+    radius6: number;
+    radius7: number;
+    radius8: number;
+    radius9: number;
   };
   shadows: { menu: string };
   colors: Record<ThemeColor, string>;
@@ -51,9 +75,38 @@ export class ThemeFactory {
   static construct(config: ThemeConfig): Theme {
     const theme: Theme = {
       breakpoints: ["480px", "1000px", "1000px"],
-      space: [0, "6px", 10, 15, 20, 25, 30, 35],
+      space: Object.assign([0, "6px", 10, 15, 20, 25, 30, 35], {
+        spacing1: 3,
+        spacing2: 5,
+        spacing3: 7,
+        spacing4: 10,
+        spacing5: 13,
+        spacing6: 15,
+        spacing7: 20,
+        spacing8: 25,
+        spacing9: 30,
+        spacing10: 35,
+        spacing11: 40,
+        spacing12: 45,
+        spacing13: 50
+      }),
       sizes: { full: "100%", half: "50%" },
-      radii: { none: 0, default: 5, large: 7, dialog: 10, small: 2.5 },
+      radii: {
+        none: 0,
+        default: 5,
+        large: 7,
+        dialog: 10,
+        small: 2.5,
+        radius1: 5,
+        radius2: 10,
+        radius3: 15,
+        radius4: 20,
+        radius5: 25,
+        radius6: 30,
+        radius7: 35,
+        radius8: 40,
+        radius9: 45
+      },
       iconSizes: { big: 16, medium: 14, small: 12 },
       colors: flattenVariants(config.scope),
       shadows: