New global gradient token and new component tokens for the Appbar and…

… Progress Bar components that use gradients
linode · Aug 22, 2024 · 64192e9 · 64192e9
1 parent de5f3b3
commit 64192e9
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/tokens/components/bars/appbar.json b/tokens/components/bars/appbar.json
@@ -16,6 +16,10 @@
       "icon": {
         "value": "{alias.content.icon.primary.default}",
         "type": "color"
+      },
+      "topGradient": {
+        "value": "{global.color.gradient.default}",
+        "type": "color"
       }
     }
   }

diff --git a/tokens/components/progressBar/progressBar.json b/tokens/components/progressBar/progressBar.json
@@ -29,6 +29,10 @@
         "error": {
           "value": "{alias.background.negative}",
           "type": "color"
+        },
+        "inProgress": {
+          "value": "{global.color.gradient.default}",
+          "type": "color"
         }
       }
     }

diff --git a/tokens/global/global.json b/tokens/global/global.json
@@ -764,6 +764,22 @@
           "value": "#3B352B",
           "type": "color"
         }
+      },
+      "gradient": {
+        "default": {
+          "value": "linear-gradient(270deg, {global.color.green.70} 0%, {global.color.teal.70} 51%, {global.color.brand.70} 100%)",
+          "type": "color",
+          "$extensions": {
+            "studio.tokens": {
+              "modify": {
+                "type": "lighten",
+                "value": "0",
+                "space": "lch"
+              }
+            }
+          },
+          "description": "Default gradient"
+        }
       }
     },
     "spacing": {