From 48ef5a02ca5fa90b6150333979bd10963f6fc545 Mon Sep 17 00:00:00 2001
From: cheton <cheton@gmail.com>
Date: Tue, 17 Dec 2024 21:27:14 +0800
Subject: [PATCH] feat: enhance support for nested theme token structures

---
 .../styled-system/src/utils/transforms.js     | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/packages/styled-system/src/utils/transforms.js b/packages/styled-system/src/utils/transforms.js
index 544a54be8c..bce340eeeb 100644
--- a/packages/styled-system/src/utils/transforms.js
+++ b/packages/styled-system/src/utils/transforms.js
@@ -28,7 +28,43 @@ const toNegativeValue = (scale, absoluteValue, options) => {
 };
 
 export const getter = (scale, value, options) => {
-  const result = get(scale, value);
+  let result = get(scale, value);
+
+  // Extract the `value` property if the result is an object.
+  //
+  // Example usage:
+  // ```
+  // <Box color="white.primary" />
+  // <Box color="black.primary" />
+  // ```
+  //
+  // The `colors` scale in the theme:
+  // ```js
+  // {
+  //   colors: {
+  //     white: {
+  //       primary: {
+  //         value: 'rgba(255, 255, 255, .92)',
+  //       },
+  //       secondary: {
+  //         value: 'rgba(255, 255, 255, .60)',
+  //       },
+  //     },
+  //     black: {
+  //       primary: {
+  //         value: 'rgba(0, 0, 0, .92)',
+  //       },
+  //       secondary: {
+  //         value: 'rgba(0, 0, 0, .65)',
+  //       },
+  //     },
+  //   },
+  // }
+  // ```
+  if (typeof result === 'object') {
+    result = result?.value;
+  }
+
   if (result === undefined) {
     return value; // fallback to value if result is undefined
   }