- Fixes for elevations: wrong inner-shadow value was changed to a dro…

…p-shadow; - Added “s-inverted” elevation token for containers that appear above the component; - “Background-overlay” alias token for page dimming (when modal is active); - New global token “global.borderRadius.none”;
linode · Jul 31, 2024 · d0aecb5 · d0aecb5
1 parent 7388c1b
commit d0aecb5
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 8 deletions.
diff --git a/tokens/alias/dark.json b/tokens/alias/dark.json
@@ -163,6 +163,19 @@
         "value": "{global.color.neutrals.white}",
         "type": "color",
         "description": "Tooltip background"
+      },
+      "overlay": {
+        "value": "{global.color.neutrals.black}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.84",
+              "space": "lch"
+            }
+          }
+        }
       }
     },
     "interaction": {
@@ -449,25 +462,39 @@
           "blur": "6",
           "spread": "0",
           "color": "rgba(0,0,0,0.18)",
-          "type": "innerShadow"
+          "type": "dropShadow"
         },
         "type": "boxShadow"
       },
+      "s-inverted": {
+        "value": {
+          "x": "0",
+          "y": "-2",
+          "blur": "6",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.18)",
+          "type": "dropShadow"
+        },
+        "type": "boxShadow",
+        "description": "Inverted shadow for elements that appear above the component"
+      },
       "l": {
         "value": [
           {
             "x": "0",
             "y": "16",
             "blur": "32",
             "spread": "0",
-            "color": "rgba(0,0,0,0.18)"
+            "color": "rgba(0,0,0,0.18)",
+            "type": "dropShadow"
           },
           {
             "x": "0",
             "y": "4",
             "blur": "8",
             "spread": "0",
-            "color": "rgba(0,0,0,0.08)"
+            "color": "rgba(0,0,0,0.08)",
+            "type": "dropShadow"
           }
         ],
         "type": "boxShadow"

diff --git a/tokens/alias/light.json b/tokens/alias/light.json
@@ -215,6 +215,20 @@
       "neutralsubtle": {
         "value": "{global.color.neutrals.20}",
         "type": "color"
+      },
+      "overlay": {
+        "value": "{global.color.neutrals.black}",
+        "type": "color",
+        "$extensions": {
+          "studio.tokens": {
+            "modify": {
+              "type": "alpha",
+              "value": "0.24",
+              "space": "lch"
+            }
+          }
+        },
+        "description": "Page dimming when the modal component is active"
       }
     },
     "action": {
@@ -352,9 +366,22 @@
           "blur": "6",
           "spread": "0",
           "color": "rgba(58,59,63,0.18)",
-          "type": "innerShadow"
+          "type": "dropShadow"
+        },
+        "type": "boxShadow",
+        "description": "Default shadow for components, like notification banners, dropdowns, popups;"
+      },
+      "s-inverted": {
+        "value": {
+          "x": "0",
+          "y": "-2",
+          "blur": "6",
+          "spread": "0",
+          "color": "rgba(58,59,63,0.18)",
+          "type": "dropShadow"
         },
-        "type": "boxShadow"
+        "type": "boxShadow",
+        "description": "Inverted shadow for elements that appear above the component"
       },
       "l": {
         "value": [
@@ -363,17 +390,20 @@
             "y": "16",
             "blur": "32",
             "spread": "0",
-            "color": "rgba(58,59,63,0.18)"
+            "color": "rgba(58,59,63,0.18)",
+            "type": "dropShadow"
           },
           {
             "x": "0",
             "y": "4",
             "blur": "8",
             "spread": "0",
-            "color": "rgba(58,59,63,0.08)"
+            "color": "rgba(58,59,63,0.08)",
+            "type": "dropShadow"
           }
         ],
-        "type": "boxShadow"
+        "type": "boxShadow",
+        "description": "Shadow for modals"
       }
     },
     "typography": {

diff --git a/tokens/global/global.json b/tokens/global/global.json
@@ -952,6 +952,12 @@
           "type": "textCase"
         }
       }
+    },
+    "borderRadius": {
+      "none": {
+        "value": "0",
+        "type": "borderRadius"
+      }
     }
   }
 }