feat(Panel and Elevation): UXW-930 tokens for panel boxShadow and ele…

…vation levels (#33) * UXW-930: tokens for border elevation and box shadow draggable panel * UXW-930: color border elevation tokens have been created.
DevoInc · Jun 5, 2023 · aded18a · aded18a
1 parent 5962827
commit aded18a
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 0 deletions.
diff --git a/tokens/src/tokens/alias/color-border.json b/tokens/src/tokens/alias/color-border.json
@@ -2,6 +2,40 @@
   "alias": {
     "color": {
       "border": {
+        "elevation": {
+          "ground": {
+            "value": "unset"
+          },
+          "raised": {
+            "value": "{alias.color.border.separator.base.weak.value}"
+          },
+          "sticky": {
+            "bottom": {
+              "value": "{alias.color.border.separator.base.weak.value}"
+            },
+            "top": {
+              "value": "{alias.color.border.separator.base.weak.value}"
+            },
+            "right": {
+              "value": "{alias.color.border.separator.base.weak.value}"
+            },
+            "left": {
+              "value": "{alias.color.border.separator.base.weak.value}"
+            }
+          },
+          "activated": {
+            "value": "{alias.color.border.separator.base.weak.value}"
+          },
+          "draggable": {
+            "value": "{alias.color.border.separator.base.weak.value}"
+          },
+          "overlay": {
+            "value": "{alias.color.border.separator.base.weak.value}"
+          },
+          "popOut": {
+            "value": "{alias.color.border.separator.base.weak.value}"
+          }
+        },
         "feedback": {
           "primary": {
             "base": {

diff --git a/tokens/src/tokens/component/layout/Panel/panel.json b/tokens/src/tokens/component/layout/Panel/panel.json
@@ -6,6 +6,15 @@
           "value": "{alias.color.background.surface.base.base.value}"
         }
       },
+      "elevation": {
+        "boxShadow": {
+          "depth": {
+            "draggableOverlay": {
+              "value": "0 0 1.6rem 0.4rem rgba({theme.color.shadow.base.enabled.rgbValues}, 0.35), 0 0 0.1rem 0 rgba({theme.color.shadow.base.enabled.rgbValues}, 0.31)"
+            }
+          }
+        }
+      },
       "shape": {
         "borderRadius": {
           "value": "{alias.shape.borderRadius.lg.value}"