chore: Sync Tokens Studio config 🤖

packages/canvas-tokens-docs/stories/brand/Brand.stories.mdx

@@ -54,6 +54,10 @@ same styles using CSS variables directly.
 
 Currently, tenant theming is scoped to color.
 
+> **Note:** `--cnvs-brand-action-**` should be used with caution. Defining brand primary colors should cover most of the theming use cases. However, in situations where you want more granular control over actions like `PrimaryButton`, you can define different colors for the action tokens. By Default, the action tokens map to our `--cnvs-brand-primary-**` tokens.
+
+
+
 <ColorTokens />
 
 </Unstyled>

packages/canvas-tokens/tokens/web/brand.json

@@ -130,6 +130,38 @@
         "type": "color"
       }
     },
+    "action": {
+      "lightest": {
+        "value": "{brand.primary.lightest}",
+        "type": "color",
+        "description": "Lightest action color"
+      },
+      "light": {
+        "value": "{brand.primary.light}",
+        "type": "color",
+        "description": "Light action color"
+      },
+      "base": {
+        "value": "{brand.primary.base}",
+        "type": "color",
+        "description": "Base action color"
+      },
+      "dark": {
+        "value": "{brand.primary.dark}",
+        "type": "color",
+        "description": "Dark action color"
+      },
+      "darkest": {
+        "value": "{brand.primary.darkest}",
+        "type": "color",
+        "description": "Darkest action color"
+      },
+      "accent": {
+        "value": "{brand.primary.accent}",
+        "type": "color",
+        "description": "Foreground color in actions"
+      }
+    },
     "common": {
       "focus-outline": {
         "value": "{palette.blueberry.400}",

packages/canvas-tokens/tokens/web/sys.json

@@ -816,6 +816,7 @@
         }
       }
     },
+    "layer-opacity": {},
     "shape": {
       "zero": {
         "value": "0rem",