define shadows as composite types

woylie · Jul 5, 2024 · 80282c5 · 80282c5
1 parent 7d36d08
commit 80282c5
Showing 1 changed file with 90 additions and 6 deletions.
diff --git a/src/tokens/shadow.js b/src/tokens/shadow.js
@@ -3,16 +3,100 @@ export default {
     $type: "shadow",
     elevation: {
       low: {
-        $value:
-          "0.3px 0.5px 0.5px rgba(0, 0, 0, 0.45), 0.4px 0.7px 0.7px -2px rgba(0, 0, 0, 0.34), 0.9px 1.8px 1.8px -4px rgba(0, 0, 0, 0.22)",
+        $value: [
+          {
+            color: "#00000073",
+            offsetX: "0.3px",
+            offsetY: "0.5px",
+            blur: "0.5px",
+            spread: "0px",
+          },
+          {
+            color: "#00000057",
+            offsetX: "0.4px",
+            offsetY: "0.7px",
+            blur: "0.7px",
+            spread: "-2px",
+          },
+          {
+            color: "#00000038",
+            offsetX: "0.9px",
+            offsetY: "1.8px",
+            blur: "1.8px",
+            spread: "-4px",
+          },
+        ],
       },
       medium: {
-        $value:
-          "0.3px 0.5px 0.5px rgba(0, 0, 0, 0.47), 0.6px 1.1px 1.1px -1.3px rgba(0, 0, 0, 0.38), 1.7px 3.3px 3.3px -2.7px rgba(0, 0, 0, 0.29), 4.6px 9.1px 9.2px -4px rgba(0, 0, 0, 0.21)",
+        $value: [
+          {
+            color: "#00000078",
+            offsetX: "0.3px",
+            offsetY: "0.5px",
+            blur: "0.5px",
+            spread: "0px",
+          },
+          {
+            color: "#00000061",
+            offsetX: "0.6px",
+            offsetY: "1.1px",
+            blur: "1.1px",
+            spread: "-1.3px",
+          },
+          {
+            color: "#0000004a",
+            offsetX: "1.7px",
+            offsetY: "3.3px",
+            blur: "3.3px",
+            spread: "-2.7px",
+          },
+          {
+            color: "#00000036",
+            offsetX: "4.6px",
+            offsetY: "9.1px",
+            blur: "9.2px",
+            spread: "-4px",
+          },
+        ],
       },
       high: {
-        $value:
-          "0.3px 0.5px 0.5px rgba(0, 0, 0, 0.44), 0.7px 1.4px 1.4px -0.6px rgba(0, 0, 0, 0.4), 1.3px 2.7px 2.7px -1.1px rgba(0, 0, 0, 0.35), 2.6px 5.2px 5.2px -1.7px rgba(0, 0, 0, 0.31), 4.8px 9.5px 9.6px -2.3px rgba(0, 0, 0, 0.27), 8.2px 16.5px 16.6px -2.9px rgba(0, 0, 0, 0.23), 13.4px 26.7px 26.9px -3.4px rgba(0, 0, 0, 0.19), 20.5px 41px 41.3px -4px rgba(0, 0, 0, 0.15)",
+        $value: [
+          {
+            color: "#0000007D",
+            offsetX: "0.3px",
+            offsetY: "0.5px",
+            blur: "0.5px",
+            spread: "0px",
+          },
+          {
+            color: "#00000069",
+            offsetX: "0.8px",
+            offsetY: "1.5px",
+            blur: "1.5px",
+            spread: "-1px",
+          },
+          {
+            color: "#00000055",
+            offsetX: "2px",
+            offsetY: "3.8px",
+            blur: "3.8px",
+            spread: "-2.5px",
+          },
+          {
+            color: "#00000044",
+            offsetX: "5px",
+            offsetY: "9.5px",
+            blur: "9.5px",
+            spread: "-3px",
+          },
+          {
+            color: "#00000033",
+            offsetX: "12px",
+            offsetY: "24px",
+            blur: "24px",
+            spread: "-5px",
+          },
+        ],
       },
     },
   },