From e73a4f91858cc7afedd60620d36d376fc69d2b08 Mon Sep 17 00:00:00 2001
From: Peter Kulko <peter.kulko@raccoongang.com>
Date: Sun, 8 Sep 2024 18:37:42 +0300
Subject: [PATCH] feat: added expanded tokens

---
 lib/build-tokens.js                           |   3 +-
 styles/css/core/variables.css                 |   2 +-
 styles/css/themes/light/variables.css         |  10 +-
 tokens/src/core/components/Bubble.json        |   2 +-
 tokens/src/core/components/Carousel.json      |  15 +-
 .../themes/light/components/Annotation.json   |  17 +-
 .../themes/light/components/CloseButton.json  |  10 +-
 .../src/themes/light/components/Dropzone.json |  48 +-
 .../light/components/Form/elevation.json      |  33 +-
 .../themes/light/components/IconButton.json   | 198 +++++++-
 tokens/src/themes/light/components/Modal.json |  15 +-
 .../src/themes/light/components/Sticky.json   |  30 +-
 tokens/src/themes/light/components/Toast.json |  15 +-
 .../src/themes/light/components/Tooltip.json  |  17 +-
 .../light/components/general/input.json       |   8 +-
 tokens/src/themes/light/global/elevation.json | 471 ++++++++++++++++--
 tokens/utils.js                               |  56 +++
 17 files changed, 873 insertions(+), 77 deletions(-)

diff --git a/lib/build-tokens.js b/lib/build-tokens.js
index 2fa26c22b4..93870a0519 100755
--- a/lib/build-tokens.js
+++ b/lib/build-tokens.js
@@ -4,7 +4,7 @@ const {
   initializeStyleDictionary,
   colorTransform,
 } = require('../tokens/style-dictionary');
-const { createIndexCssFile } = require('../tokens/utils');
+const { createIndexCssFile, constructExpandedToken } = require('../tokens/utils');
 
 /**
  * Builds tokens for CSS styles from JSON source files.
@@ -53,6 +53,7 @@ async function buildTokensCommand(commandArgs) {
       path.resolve(__dirname, '../tokens/src/core/**/*.json'),
       path.resolve(__dirname, '../tokens/src/core/**/*.toml'),
     ],
+    expand: (token) => constructExpandedToken(token),
     source: tokensSource
       ? [`${tokensSource}/core/**/*.json`, `${tokensSource}/core/**/*.toml`]
       : [],
diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
index c5346db946..1829556721 100644
--- a/styles/css/core/variables.css
+++ b/styles/css/core/variables.css
@@ -41,7 +41,7 @@
   --pgn-transition-carousel-control: opacity .15s ease;
   --pgn-transition-carousel-indicator: opacity .6s ease;
   --pgn-transition-carousel-duration: .6s;
-  --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out;
+  --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out 0ms;
   --pgn-transition-btn: none;
   --pgn-transition-badge: none;
   --pgn-typography-print-page-size: a3;
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
index 4efd43154e..6f76213489 100644
--- a/styles/css/themes/light/variables.css
+++ b/styles/css/themes/light/variables.css
@@ -1573,8 +1573,8 @@
   --pgn-elevation-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15);
   --pgn-elevation-scrollable-body-box-shadow: #0000008C;
   --pgn-elevation-progress-bar-box-shadow: none;
-  --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow);
-  --pgn-elevation-menu-box-shadow: var(--pgn-elevation-box-shadow-base);
+  --pgn-elevation-pagination-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
+  --pgn-elevation-menu-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .3);
   --pgn-elevation-image-thumbnail-box-shadow: none;
   --pgn-elevation-icon-button-box-shadow-black-inverse-active: none;
   --pgn-elevation-icon-button-box-shadow-black-active: none;
@@ -1612,9 +1612,9 @@
   --pgn-elevation-icon-button-box-shadow-primary-active: none;
   --pgn-elevation-icon-button-box-shadow-primary-inverse: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-accent);
   --pgn-elevation-icon-button-box-shadow-primary-base: inset 0 0 0 var(--pgn-size-btn-focus-width) var(--pgn-color-icon-button-text-primary-base);
-  --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow);
+  --pgn-elevation-form-control-select-border-focus: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
   --pgn-elevation-form-control-select-border-base: none;
-  --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus);
+  --pgn-elevation-form-control-file-focus: 0 0 0 1px var(--pgn-color-primary-500);
   --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base);
   --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus);
   --pgn-elevation-form-control-range-thumb-base: none;
@@ -1630,7 +1630,7 @@
   --pgn-elevation-dropzone-active: inset 0 0 0 2px var(--pgn-color-primary-500);
   --pgn-elevation-dropzone-focus: inset 0 0 0 2px var(--pgn-color-info-300);
   --pgn-elevation-dropzone-hover: inset 0 0 0 2px var(--pgn-color-info-300);
-  --pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm);
+  --pgn-elevation-data-table-box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .2);
   --pgn-elevation-code-kbd-box-shadow: none;
   --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white);
   --pgn-elevation-btn-box-shadow-active: none;
diff --git a/tokens/src/core/components/Bubble.json b/tokens/src/core/components/Bubble.json
index 57b8659d36..587265277c 100644
--- a/tokens/src/core/components/Bubble.json
+++ b/tokens/src/core/components/Bubble.json
@@ -1,6 +1,6 @@
 {
   "spacing": {
-    "$type": "transition",
+    "$type": "dimension",
     "bubble": {
       "expandable-padding": {
         "y": { "source": "$bubble-expandable-padding-y", "$value": "0" },
diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json
index 07248dda1c..fd70ea37e6 100644
--- a/tokens/src/core/components/Carousel.json
+++ b/tokens/src/core/components/Carousel.json
@@ -25,11 +25,20 @@
     }
   },
   "transition": {
+    "$type": "transition",
     "carousel": {
-      "base": { "source": "$carousel-transition", "$value": "transform {transition.carousel.duration} ease-in-out", "$type": "transition" },
+      "base": {
+        "source": "$carousel-transition",
+        "$value": {
+          "property": "transform",
+          "duration": "{transition.carousel.duration}",
+          "delay": "0ms",
+          "timingFunction": "ease-in-out"
+        }
+      },
       "duration": { "source": "$carousel-transition-duration", "$value": ".6s", "$type": "duration" },
-      "indicator": { "source": "$carousel-indicator-transition", "$value": "opacity .6s ease", "$type": "transition" },
-      "control": { "source": "$carousel-control-transition", "$value": "opacity .15s ease", "$type": "transition" }
+      "indicator": { "source": "$carousel-indicator-transition", "$value": "opacity .6s ease" },
+      "control": { "source": "$carousel-control-transition", "$value": "opacity .15s ease" }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json
index c24ae26a72..0234a53246 100644
--- a/tokens/src/themes/light/components/Annotation.json
+++ b/tokens/src/themes/light/components/Annotation.json
@@ -4,7 +4,22 @@
     "annotation": {
       "box-shadow": {
         "source": "$annotation-box-shadow",
-        "$value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))"
+        "$value": [
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "4px",
+            "dropShadow": true
+          },
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "8px",
+            "dropShadow": true
+          }
+        ]
       }
     }
   },
diff --git a/tokens/src/themes/light/components/CloseButton.json b/tokens/src/themes/light/components/CloseButton.json
index f7994d321c..dcba0a2d29 100644
--- a/tokens/src/themes/light/components/CloseButton.json
+++ b/tokens/src/themes/light/components/CloseButton.json
@@ -6,7 +6,15 @@
   "elevation": {
     "$type": "shadow",
     "close-button": {
-      "text-shadow": { "source": "$close-text-shadow", "$value": "0 1px 0 {color.white}" }
+      "text-shadow": {
+        "source": "$close-text-shadow",
+        "$value": {
+          "color": "{color.white}",
+          "offsetX": "0",
+          "offsetY": "1px",
+          "blur": "0"
+        }
+      }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json
index c757e73342..97307c6614 100644
--- a/tokens/src/themes/light/components/Dropzone.json
+++ b/tokens/src/themes/light/components/Dropzone.json
@@ -12,10 +12,50 @@
   "elevation": {
     "$type": "shadow",
     "dropzone": {
-      "hover": { "source": "$dropzone-box-shadow-hover", "$value": "inset 0 0 0 2px {color.info.300}" },
-      "focus": { "source": "$dropzone-box-shadow-focus", "$value": "inset 0 0 0 2px {color.info.300}" },
-      "active": { "source": "$dropzone-box-shadow-active", "$value": "inset 0 0 0 2px {color.primary.500}" },
-      "error": { "source": "$dropzone-box-shadow-error", "$value": "inset 0 0 0 2px {color.danger.300}" }
+      "hover": {
+        "source": "$dropzone-box-shadow-hover",
+        "$value": {
+          "color": "{color.info.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": true
+        }
+      },
+      "focus": {
+        "source": "$dropzone-box-shadow-focus",
+        "$value": {
+          "color": "{color.info.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": true
+        }
+      },
+      "active": {
+        "source": "$dropzone-box-shadow-active",
+        "$value": {
+          "color": "{color.primary.500}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": true
+        }
+      },
+      "error": {
+        "source": "$dropzone-box-shadow-error",
+        "$value": {
+          "color": "{color.danger.300}",
+          "spread": "2px",
+          "offsetX": "0",
+          "offsetY": "0",
+          "blur": "0",
+          "inset": true
+        }
+      }
     }
   }
 }
diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json
index e19b6dfa3e..2d6388d559 100644
--- a/tokens/src/themes/light/components/Form/elevation.json
+++ b/tokens/src/themes/light/components/Form/elevation.json
@@ -4,14 +4,32 @@
     "form": {
       "input": {
         "base": { "source": "$input-box-shadow", "$value": "none" },
-        "focus": { "source": "$input-focus-box-shadow", "$value": "0 0 0 1px {color.primary.500}" }
+        "focus": {
+          "source": "$input-focus-box-shadow",
+          "$value": {
+            "color": "{color.primary.500}",
+            "spread": "1px",
+            "offsetX": "0",
+            "offsetY": "0",
+            "blur": "0"
+          }
+        }
       },
       "control": {
         "indicator": {
           "base": { "source": "$custom-control-indicator-box-shadow", "$value": "{elevation.form.input.base}" },
           "checked": {
             "base": { "source": "$custom-control-indicator-checked-box-shadow", "$value": "none" },
-            "focus": { "source": "$custom-control-indicator-focus-box-shadow", "$value": "0 0 0 4px rgba(0, 0, 0, .1)" }
+            "focus": {
+              "source": "$custom-control-indicator-focus-box-shadow",
+              "$value": {
+                "color": "rgba(0, 0, 0, .1)",
+                "spread": "4px",
+                "offsetX": "0",
+                "offsetY": "0",
+                "blur": "0"
+              }
+            }
           },
           "active": { "source": "$custom-control-indicator-active-box-shadow", "$value": "none" }
         },
@@ -26,7 +44,16 @@
             "base": { "source": "$custom-range-thumb-box-shadow", "$value": "none" },
             "focus": {
               "source": "$custom-range-thumb-focus-box-shadow",
-              "$value": "0 0 0 1px {color.body.bg}, {size.form.input.width.focus}"
+              "$value": [
+                {
+                  "color": "{color.body.bg}",
+                  "spread": "1px",
+                  "offsetX": "0",
+                  "offsetY": "0",
+                  "blur": "0"
+                },
+                "{size.form.input.width.focus}"
+              ]
             }
           }
         },
diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json
index 3621861c48..b13ff1a676 100644
--- a/tokens/src/themes/light/components/IconButton.json
+++ b/tokens/src/themes/light/components/IconButton.json
@@ -382,56 +382,218 @@
     "icon-button": {
       "box-shadow": {
         "primary": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.primary.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.primary.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "secondary": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.secondary.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.secondary.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "brand": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.brand.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.brand.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "success": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.success.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.success.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "warning": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.warning.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.warning.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "danger": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.danger.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.danger.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "light": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.light.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.light.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "dark": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.dark.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.dark.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         },
         "black": {
-          "base": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.text.black.base}" },
-          "inverse": { "$value": "inset 0 0 0 {size.btn.focus.width} {color.icon-button.accent}" },
+          "base": {
+            "$value": {
+              "color": "{color.icon-button.text.black.base}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
+          "inverse": {
+            "$value": {
+              "color": "{color.icon-button.accent}",
+              "spread": "{size.btn.focus.width}",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "0",
+              "inset": true
+            }
+          },
           "active": { "$value": "none" },
           "inverse-active": { "$value": "none" }
         }
diff --git a/tokens/src/themes/light/components/Modal.json b/tokens/src/themes/light/components/Modal.json
index 13b21f679d..b11fd11149 100644
--- a/tokens/src/themes/light/components/Modal.json
+++ b/tokens/src/themes/light/components/Modal.json
@@ -20,7 +20,20 @@
         "box-shadow": {
           "sm-up": {
             "source": "$modal-content-box-shadow-sm-up",
-            "$value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)"
+            "$value": [
+              {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "10px",
+                "blur": "20px"
+              },
+              {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "8px",
+                "blur": "20px"
+              }
+            ]
           }
         }
       }
diff --git a/tokens/src/themes/light/components/Sticky.json b/tokens/src/themes/light/components/Sticky.json
index 85b87d70bb..6fe18059fe 100644
--- a/tokens/src/themes/light/components/Sticky.json
+++ b/tokens/src/themes/light/components/Sticky.json
@@ -5,11 +5,37 @@
       "shadow": {
         "top": {
           "source": "$sticky-shadow-top",
-          "$value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)"
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.25rem",
+              "blur": ".625rem"
+            }
+          ]
         },
         "bottom": {
           "source": "$sticky-shadow-bottom",
-          "$value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)"
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".25rem",
+              "blur": ".625rem"
+            }
+          ]
         }
       }
     }
diff --git a/tokens/src/themes/light/components/Toast.json b/tokens/src/themes/light/components/Toast.json
index abc5d7f77a..57f9d6d4d6 100644
--- a/tokens/src/themes/light/components/Toast.json
+++ b/tokens/src/themes/light/components/Toast.json
@@ -25,7 +25,20 @@
     "toast": {
       "box-shadow": {
         "source": "$toast-box-shadow",
-        "$value": "0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15)"
+        "$value": [
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "1.25rem",
+            "blur": "2.5rem"
+          },
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": ".5rem",
+            "blur": "3rem"
+          }
+        ]
       }
     }
   }
diff --git a/tokens/src/themes/light/components/Tooltip.json b/tokens/src/themes/light/components/Tooltip.json
index 174eea3cd5..47ad4a748d 100644
--- a/tokens/src/themes/light/components/Tooltip.json
+++ b/tokens/src/themes/light/components/Tooltip.json
@@ -19,7 +19,22 @@
     "tooltip": {
       "box-shadow": {
         "source": "$tooltip-box-shadow",
-        "$value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))"
+        "$value": [
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "4px",
+            "dropShadow": true
+          },
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "8px",
+            "dropShadow": true
+          }
+        ]
       }
     }
   },
diff --git a/tokens/src/themes/light/components/general/input.json b/tokens/src/themes/light/components/general/input.json
index f6b3c23188..424b099dbb 100644
--- a/tokens/src/themes/light/components/general/input.json
+++ b/tokens/src/themes/light/components/general/input.json
@@ -11,7 +11,13 @@
       "btn-focus": {
         "box-shadow": {
           "source": "$input-btn-focus-box-shadow",
-          "$value": "0 0 0 {size.input.btn.focus-width} {color.input.btn-focus}"
+          "$value": {
+            "color": "{color.input.btn-focus}",
+            "spread": "{size.input.btn.focus-width}",
+            "offsetX": "0",
+            "offsetY": "0",
+            "blur": "0"
+          }
         }
       }
     }
diff --git a/tokens/src/themes/light/global/elevation.json b/tokens/src/themes/light/global/elevation.json
index 518ff1f5d0..ba0697b0af 100644
--- a/tokens/src/themes/light/global/elevation.json
+++ b/tokens/src/themes/light/global/elevation.json
@@ -5,177 +5,582 @@
       "level": {
         "1": {
           "source": "$level-1-box-shadow",
-          "$value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".25rem"
+            }
+          ],
           "$description": "Basic box shadow of level 1."
         },
         "2": {
           "source": "$level-2-box-shadow",
-          "$value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".5rem"
+            }
+          ],
           "$description": "Basic box shadow of level 2."
         },
         "3": {
           "source": "$level-3-box-shadow",
-          "$value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".625rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1rem"
+            }
+          ],
           "$description": "Basic box shadow of level 3."
         },
         "4": {
           "source": "$level-4-box-shadow",
-          "$value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".625rem",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1.25rem"
+            }
+          ],
           "$description": "Basic box shadow of level 4."
         },
         "5": {
           "source": "$level-5-box-shadow",
-          "$value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "1.25px",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "2.5rem"
+            }
+          ],
           "$description": "Basic box shadow of level 5."
         }
       },
       "base": {
         "source": "$box-shadow",
-        "$value": "0 .125rem .25rem rgba(0, 0, 0, .3)",
+        "$value": {
+          "color": "rgba(0, 0, 0, .3)",
+          "offsetX": "0",
+          "offsetY": ".125rem",
+          "blur": ".25rem"
+        },
         "$description": "Default box shadow."
       },
       "sm": {
         "source": "$box-shadow-sm",
-        "$value": "0 .0625rem .125rem rgba(0, 0, 0, .2)",
+        "$value": {
+          "color": "rgba(0, 0, 0, .2)",
+          "offsetX": "0",
+          "offsetY": ".0625rem",
+          "blur": ".125rem"
+        },
         "$description": "Small box shadow."
       },
       "lg": {
         "source": "$box-shadow-lg",
-        "$value": "0 .25rem .5rem rgba(0, 0, 0, .3)",
+        "$value": {
+          "color": "rgba(0, 0, 0, .3)",
+          "offsetX": "0",
+          "offsetY": ".25rem",
+          "blur": ".5rem"
+        },
         "$description": "Large box shadow."
       },
       "down": {
         "1": {
           "source": "$box-shadow-down-1",
-          "$value": "0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".0625rem",
+              "blur": ".25rem"
+            }
+          ],
           "$description": "Bottom box shadow of level 1."
         },
         "2": {
           "source": "$box-shadow-down-2",
-          "$value": "0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".125rem",
+              "blur": ".5rem"
+            }
+          ],
           "$description": "Bottom box shadow of level 2."
         },
         "3": {
           "source": "$box-shadow-down-3",
-          "$value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".25rem",
+              "blur": ".625rem"
+            }
+          ],
           "$description": "Bottom box shadow of level 3."
         },
         "4": {
           "source": "$box-shadow-down-4",
-          "$value": "0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".625rem",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1.25rem"
+            }
+          ],
           "$description": "Bottom box shadow of level 4."
         },
         "5": {
           "source": "$box-shadow-down-5",
-          "$value": "0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "1.25px",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "2.5rem"
+            }
+          ],
           "$description": "Bottom box shadow of level 5."
         }
       },
       "left": {
         "1": {
           "source": "$box-shadow-left-1",
-          "$value": "-.0625rem 0 .125rem rgba(0, 0, 0, .15), -.0625rem 0 .25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.0625rem",
+              "offsetY": "0",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.0625rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            }
+          ],
           "$description": "Left box shadow of level 1."
         },
         "2": {
           "source": "$box-shadow-left-2",
-          "$value": "-.125rem 0 .25rem rgba(0, 0, 0, .15), -.125rem 0 .5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.125rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.125rem",
+              "offsetY": "0",
+              "blur": ".5rem"
+            }
+          ],
           "$description": "Left box shadow of level 2."
         },
         "3": {
           "source": "$box-shadow-left-3",
-          "$value": "-.5rem 0 1rem rgba(0, 0, 0, .15), -.25rem 0 .625rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.5rem",
+              "offsetY": "0",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.25rem",
+              "offsetY": "0",
+              "blur": ".625rem"
+            }
+          ],
           "$description": "Left box shadow of level 3."
         },
         "4": {
           "source": "$box-shadow-left-4",
-          "$value": "-.625rem 0 1.25rem rgba(0, 0, 0, .15), -.5rem 0 1.25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.625rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.5rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            }
+          ],
           "$description": "Left box shadow of level 4."
         },
         "5": {
           "source": "$box-shadow-left-5",
-          "$value": "-1.25rem 0 2.5rem rgba(0, 0, 0, .15), -.5rem 0 3rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-1.25rem",
+              "offsetY": "0",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "-.5rem",
+              "offsetY": "0",
+              "blur": "3rem"
+            }
+          ],
           "$description": "Left box shadow of level 5."
         }
       },
       "up": {
         "1": {
           "source": "$box-shadow-up-1",
-          "$value": "0 -.0625rem .125rem rgba(0, 0, 0, .15), 0 -.0625rem .25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.0625rem",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.0625rem",
+              "blur": ".25rem"
+            }
+          ],
           "$description": "Top box shadow of level 1."
         },
         "2": {
           "source": "$box-shadow-up-2",
-          "$value": "0 -.125rem .25rem rgba(0, 0, 0, .15), 0 -.125rem .5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.125rem",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.125rem",
+              "blur": ".5rem"
+            }
+          ],
           "$description": "Top box shadow of level 2."
         },
         "3": {
           "source": "$box-shadow-up-3",
-          "$value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.25rem",
+              "blur": ".625rem"
+            }
+          ],
           "$description": "Top box shadow of level 3."
         },
         "4": {
           "source": "$box-shadow-up-4",
-          "$value": "0 -.625rem 1.25rem rgba(0, 0, 0, .15), 0 -.5rem 1.25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.625rem",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "1.25rem"
+            }
+          ],
           "$description": "Top box shadow of level 4."
         },
         "5": {
           "source": "$box-shadow-up-5",
-          "$value": "0 -1.25rem 2.5rem rgba(0, 0, 0, .15), 0 -.5rem 3rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-1.25rem",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "3rem"
+            }
+          ],
           "$description": "Basic box shadow of level 5."
         }
       },
       "right": {
         "1": {
           "source": "$box-shadow-right-1",
-          "$value": ".0625rem 0 .125rem rgba(0, 0, 0, .15), .0625rem 0 .25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".0625rem",
+              "offsetY": "0",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".0625rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            }
+          ],
           "$description": "Right box shadow of level 1."
         },
         "2": {
           "source": "$box-shadow-right-2",
-          "$value": ".125rem 0 .25rem rgba(0, 0, 0, .15), .125rem 0 .5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".125rem",
+              "offsetY": "0",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".125rem",
+              "offsetY": "0",
+              "blur": ".5rem"
+            }
+          ],
           "$description": "Right box shadow of level 2."
         },
         "3": {
           "source": "$box-shadow-right-3",
-          "$value": ".5rem 0 1rem rgba(0, 0, 0, .15), .25rem 0 .625rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".5rem",
+              "offsetY": "0",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".25rem",
+              "offsetY": "0",
+              "blur": ".625rem"
+            }
+          ],
           "$description": "Right box shadow of level 3."
         },
         "4": {
           "source": "$box-shadow-right-4",
-          "$value": ".625rem 0 1.25rem rgba(0, 0, 0, .15), .5rem 0 1.25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".625rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".5rem",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            }
+          ],
           "$description": "Right box shadow of level 4."
         },
         "5": {
           "source": "$box-shadow-right-5",
-          "$value": "1.25rem 0 2.5rem rgba(0, 0, 0, .15), .5rem 0 3rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "1.25rem",
+              "offsetY": "0",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": ".5rem",
+              "offsetY": "0",
+              "blur": "3rem"
+            }
+          ],
           "$description": "Right box shadow of level 5."
         }
       },
       "centered": {
         "1": {
           "source": "$box-shadow-centered-1",
-          "$value": "0 0 .125rem rgba(0, 0, 0, .15), 0 0 .25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".125rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".25rem"
+            }
+          ],
           "$description": "Centered box shadow of level 1."
         },
         "2": {
           "source": "$box-shadow-centered-2",
-          "$value": "0 0 .25rem rgba(0, 0, 0, .15), 0 0 .5rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".5rem"
+            }
+          ],
           "$description": "Centered box shadow of level 2."
         },
         "3": {
           "source": "$box-shadow-centered-3",
-          "$value": "0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": ".625rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1rem"
+            }
+          ],
           "$description": "Centered box shadow of level 3."
         },
         "4": {
           "source": "$box-shadow-centered-4",
-          "$value": "0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "1.25rem"
+            }
+          ],
           "$description": "Centered box shadow of level 4."
         },
         "5": {
           "source": "$box-shadow-centered-5",
-          "$value": "0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15)",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "2.5rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "0",
+              "blur": "3rem"
+            }
+          ],
           "$description": "Centered box shadow of level 5."
         }
       }
diff --git a/tokens/utils.js b/tokens/utils.js
index 5fb09c77ea..00d31a45bb 100644
--- a/tokens/utils.js
+++ b/tokens/utils.js
@@ -237,10 +237,66 @@ function composeBreakpointName(breakpointName, format) {
   return `@custom-media --${breakpointName.replace(/breakpoint/g, `breakpoint-${format}-width`)}`;
 }
 
+/**
+ * Constructs and modifies the `$value` of a token based on specific properties.
+ *
+ * @param {Object} token - The token object that contains the `$value` to be expanded.
+ * @param {string|Object|Array} token.$value - The value of the token, which can be a string,
+ *                                             an object, or an array of objects.
+ *
+ * @returns {void} - This function modifies the `$value` property of the `token` object in place.
+ *
+ * @example
+ * // Given a token with a shadow array:
+ * const token = {
+ *   $value: [
+ *     { dropShadow: true, offsetX: '5px', offsetY: '5px', blur: '10px', color: '#000' },
+ *     { inset: true, offsetX: '10px', offsetY: '10px', blur: '20px', spread: '5px', color: '#333' }
+ *   ]
+ * };
+ *
+ * constructExpandedToken(token);
+ * // Result: token.$value = 'drop-shadow(5px 5px 10px #000) inset 10px 10px 20px 5px #333'
+ */
+function constructExpandedToken(token) {
+  const value = token.$value;
+
+  const createFinalValue = (val, properties) => properties
+    .map((prop) => (val[prop] !== undefined ? val[prop] : ''))
+    .filter(Boolean)
+    .join(' ');
+
+  if (value) {
+    if (Array.isArray(value)) {
+      const shadows = value
+        .filter((val) => val.dropShadow)
+        .map((val) => `drop-shadow(${createFinalValue(val, ['offsetX', 'offsetY', 'blur', 'color'])})`)
+        .join(' ');
+
+      if (shadows) {
+        token.$value = shadows;
+      } else {
+        value.forEach((val) => {
+          if (val.inset) {
+            token.$value = `inset ${createFinalValue(val, ['offsetX', 'offsetY', 'blur', 'spread', 'color'])}`;
+          }
+        });
+      }
+    } else if (value.inset) {
+      token.$value = `inset ${createFinalValue(value, ['offsetX', 'offsetY', 'blur', 'spread', 'color'])}`;
+    } else if (value.property) {
+      token.$value = createFinalValue(value, ['property', 'duration', 'timingFunction', 'delay']);
+    } else if (value.dropShadow) {
+      token.$value = `drop-shadow(${createFinalValue(value, ['offsetX', 'offsetY', 'blur', 'color'])})`;
+    }
+  }
+}
+
 module.exports = {
   createIndexCssFile,
   getFilesWithExtension,
   getSCSStoCSSMap,
   transformInPath,
   composeBreakpointName,
+  constructExpandedToken,
 };