From a447bfc5ca9aba8b09ffba4afa31d394496bda33 Mon Sep 17 00:00:00 2001
From: Xin Yun <xinyun.koh@gt.tech.gov.sg>
Date: Wed, 23 Sep 2026 11:17:16 +0800
Subject: [PATCH 1/2] [MISC][XY] Add 3 new radius tokens

---
 src/theme/styles/presets/default.css              | 3 +++
 src/theme/tokens/radius.ts                        | 3 +++
 stories/theme/doc-elements/doc-radius-display.tsx | 3 +++
 3 files changed, 9 insertions(+)

diff --git a/src/theme/styles/presets/default.css b/src/theme/styles/presets/default.css
index e41db965e9..47461bf7f5 100644
--- a/src/theme/styles/presets/default.css
+++ b/src/theme/styles/presets/default.css
@@ -101,5 +101,8 @@
     --fds-radius-sm: 4px;
     --fds-radius-md: 8px;
     --fds-radius-lg: 12px;
+    --fds-radius-xl: 16px;
+    --fds-radius-xxl: 24px;
+    --fds-radius-xxxl: 32px;
     --fds-radius-full: 9999px;
 }
diff --git a/src/theme/tokens/radius.ts b/src/theme/tokens/radius.ts
index 9ad21c984f..e69babd6ee 100644
--- a/src/theme/tokens/radius.ts
+++ b/src/theme/tokens/radius.ts
@@ -9,5 +9,8 @@ export const Radius = {
     sm: "var(--fds-radius-sm)",
     md: "var(--fds-radius-md)",
     lg: "var(--fds-radius-lg)",
+    xl: "var(--fds-radius-xl)",
+    xxl: "var(--fds-radius-xxl)",
+    xxxl: "var(--fds-radius-xxxl)",
     full: "var(--fds-radius-full)",
 } as const;
diff --git a/stories/theme/doc-elements/doc-radius-display.tsx b/stories/theme/doc-elements/doc-radius-display.tsx
index 15efef3d75..6dc67b9b90 100644
--- a/stories/theme/doc-elements/doc-radius-display.tsx
+++ b/stories/theme/doc-elements/doc-radius-display.tsx
@@ -21,6 +21,9 @@ export const RadiusDisplay = ({ theme }: RadiusDisplayProps) => {
                 <RadiusCollection token="sm" />
                 <RadiusCollection token="md" />
                 <RadiusCollection token="lg" />
+                <RadiusCollection token="xl" />
+                <RadiusCollection token="xxl" />
+                <RadiusCollection token="xxxl" />
                 <RadiusCollection token="full" />
             </div>
         </ThemeProvider>

From b8f9b2f8b56452cbb7e7d0c6f7445d9a66db25e0 Mon Sep 17 00:00:00 2001
From: Xin Yun <xinyun.koh@gt.tech.gov.sg>
Date: Wed, 23 Sep 2026 11:55:34 +0800
Subject: [PATCH 2/2] [MISC][XY] Clean up spf radius + adjust radiusExample
 size

---
 src/theme/styles/spf.css                          | 5 -----
 stories/theme/doc-elements/doc-radius-display.tsx | 6 +++---
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/theme/styles/spf.css b/src/theme/styles/spf.css
index 2e8689f066..de95b55632 100644
--- a/src/theme/styles/spf.css
+++ b/src/theme/styles/spf.css
@@ -300,12 +300,7 @@
     RADIUS
     ============================================================================
     */
-    --fds-radius-none: 0;
-    --fds-radius-xs: 2px;
     --fds-radius-sm: 8px;
-    --fds-radius-md: 8px;
-    --fds-radius-lg: 12px;
-    --fds-radius-full: 9999px;
 
     /* 
     ============================================================================
diff --git a/stories/theme/doc-elements/doc-radius-display.tsx b/stories/theme/doc-elements/doc-radius-display.tsx
index 6dc67b9b90..af4a20b76b 100644
--- a/stories/theme/doc-elements/doc-radius-display.tsx
+++ b/stories/theme/doc-elements/doc-radius-display.tsx
@@ -75,7 +75,7 @@ const row = css`
     grid-column: 1 / -1;
     grid-template-columns: subgrid;
     justify-items: flex-start;
-    align-items: flex-start;
+    align-items: center;
     gap: 0 3rem;
     margin-bottom: 2rem;
 `;
@@ -88,7 +88,7 @@ const headerRow = css`
 `;
 
 const radiusExample = css`
-    height: 48px;
-    width: 128px;
+    height: 96px;
+    width: 96px;
     background: tomato;
 `;