feat: migrate example box-shadow token to composite token

openedx · Sep 4, 2024 · 43a7b25 · 43a7b25
1 parent 029325a
commit 43a7b25
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
@@ -1566,7 +1566,7 @@
   --pgn-elevation-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15); /* Basic box shadow of level 4. */
   --pgn-elevation-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); /* Basic box shadow of level 3. */
   --pgn-elevation-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); /* Basic box shadow of level 2. */
-  --pgn-elevation-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); /* Basic box shadow of level 1. */
+  --pgn-elevation-box-shadow-level-1: 0rem 0.0625rem 0.125rem 0rem rgba(0, 0, 0, 0.15), 0rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.15); /* Basic box shadow of level 1. */
   --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus);
   --pgn-elevation-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15);
   --pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);

diff --git a/tokens/src/themes/light/global/elevation.json b/tokens/src/themes/light/global/elevation.json
@@ -5,7 +5,22 @@
       "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, 0.15)",
+              "offsetX": "0rem",
+              "offsetY": "0.0625rem",
+              "blur": "0.125rem",
+              "spread": "0rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, 0.15)",
+              "offsetX": "0rem",
+              "offsetY": "0.0625rem",
+              "blur": "0.25rem",
+              "spread": "0rem"
+            }
+          ],
           "$description": "Basic box shadow of level 1."
         },
         "2": {