v12 component rework 33

packages/ui-scripts/lib/build/tokensStudio/$metadata.json

@@ -4,15 +4,18 @@
     "canvas/semantic/color/canvas",
     "canvas/semantic/color/canvasHighContrast",
     "canvas/semantic/layout/default",
+    "canvas/component/AiInformation",
     "canvas/component/Alert",
     "canvas/component/Avatar",
     "canvas/component/Badge",
     "canvas/component/BaseButton",
+    "canvas/component/Billboard",
     "canvas/component/Breadcrumb",
     "canvas/component/Calendar",
     "canvas/component/Checkbox",
-    "canvas/component/Drilldown",
     "canvas/component/ContextView",
+    "canvas/component/DataPermissionLevels",
+    "canvas/component/Drilldown",
     "canvas/component/FileDrop",
     "canvas/component/FormFieldLayout",
     "canvas/component/FormFieldMessage",
@@ -27,12 +30,15 @@
     "canvas/component/Menu",
     "canvas/component/Metric",
     "canvas/component/Modal",
+    "canvas/component/NutritionFacts",
     "canvas/component/Options",
     "canvas/component/Pill",
     "canvas/component/Popover",
     "canvas/component/ProgressBar",
+    "canvas/component/ProgressCircle",
     "canvas/component/RadioInput",
     "canvas/component/RangeInput",
+    "canvas/component/RatingIcon",
     "canvas/component/SharedTokens",
     "canvas/component/SideNavBar",
     "canvas/component/SourceCodeEditor",
@@ -45,20 +51,22 @@
     "canvas/component/TextInput",
     "canvas/component/Toggle",
     "canvas/component/ToggleDetails",
+    "canvas/component/ToggleGroup",
     "canvas/component/Tooltip",
     "canvas/component/Tray",
     "canvas/component/TreeBrowser",
     "canvas/component/View",
-    "rebrand/component/SourceCodeEditor",
-    "rebrand/component/Table",
+    "rebrand/component/AiInformation",
     "rebrand/component/Alert",
     "rebrand/component/Avatar",
     "rebrand/component/Badge",
     "rebrand/component/BaseButton",
+    "rebrand/component/Billboard",
     "rebrand/component/Breadcrumb",
     "rebrand/component/ContextView",
     "rebrand/component/Calendar",
     "rebrand/component/Checkbox",
+    "rebrand/component/DataPermissionLevels",
     "rebrand/component/Drilldown",
     "rebrand/component/FileDrop",
     "rebrand/component/Flex",
@@ -74,22 +82,28 @@
     "rebrand/component/Menu",
     "rebrand/component/Metric",
     "rebrand/component/Modal",
+    "rebrand/component/NutritionFacts",
     "rebrand/component/Options",
     "rebrand/component/Pill",
     "rebrand/component/Popover",
     "rebrand/component/ProgressBar",
+    "rebrand/component/ProgressCircle",
     "rebrand/component/RadioInput",
     "rebrand/component/RangeInput",
+    "rebrand/component/RatingIcon",
     "rebrand/component/SharedTokens",
     "rebrand/component/SideNavBar",
+    "rebrand/component/SourceCodeEditor",
     "rebrand/component/Spinner",
+    "rebrand/component/Table",
     "rebrand/component/Tabs",
     "rebrand/component/Tag",
     "rebrand/component/Text",
     "rebrand/component/TextArea",
     "rebrand/component/TextInput",
     "rebrand/component/Toggle",
     "rebrand/component/ToggleDetails",
+    "rebrand/component/ToggleGroup",
     "rebrand/component/Tooltip",
     "rebrand/component/Tray",
     "rebrand/component/TreeBrowser",

packages/ui-scripts/lib/build/tokensStudio/canvas/component/AiInformation.json

@@ -0,0 +1,52 @@
+{
+  "aiInformation": {
+    "bodyPadding": {
+      "value": "{spacing.spaceXl}",
+      "type": "spacing"
+    },
+    "headingBottomMargin": {
+      "value": "{spacing.spaceXl}",
+      "type": "spacing"
+    },
+    "featureNameBottomMargin": {
+      "value": "{spacing.spaceLg}",
+      "type": "spacing"
+    },
+    "permissionLevelTextBottomMargin": {
+      "value": "{spacing.spaceSm}",
+      "type": "spacing"
+    },
+    "permissionLevelBottomMargin": {
+      "value": "{spacing.spaceSm}",
+      "type": "spacing"
+    },
+    "descriptionBottomMargin": {
+      "value": "{spacing.spaceSm}",
+      "type": "spacing"
+    },
+    "modelNameTextBottomMargin": {
+      "value": "{spacing.spaceXs}",
+      "type": "spacing"
+    },
+    "modelNameBottomMargin": {
+      "value": "{spacing.spaceXs}",
+      "type": "spacing"
+    },
+    "dividerMargin": {
+      "value": "{spacing.spaceLg}",
+      "type": "spacing"
+    },
+    "dividerColor": {
+      "value": "{color.stroke.muted}",
+      "type": "color"
+    },
+    "levelColor": {
+      "value": "{color.text.aiColor}",
+      "type": "color"
+    },
+    "permissionLevelsModalTriggerBottomMargin": {
+      "value": "{spacing.spaceXl}",
+      "type": "spacing"
+    }
+  }
+}

packages/ui-scripts/lib/build/tokensStudio/canvas/component/Billboard.json

@@ -0,0 +1,76 @@
+{
+  "billboard": {
+    "backgroundColor": {
+      "value": "{color.background.base}",
+      "type": "color"
+    },
+    "fontFamily": {
+      "value": "{fontFamily.base}",
+      "type": "fontFamilies"
+    },
+    "paddingSmall": {
+      "value": "{spacing.spaceMd}",
+      "type": "spacing"
+    },
+    "paddingMedium": {
+      "value": "{spacing.spaceXl}",
+      "type": "spacing"
+    },
+    "paddingLarge": {
+      "value": "{spacing.spaceXl}",
+      "type": "spacing"
+    },
+    "mediumMargin": {
+      "value": "{spacing.spaceMd}",
+      "type": "spacing"
+    },
+    "largeMargin": {
+      "value": "{spacing.spaceXl}",
+      "type": "spacing"
+    },
+    "buttonBorderWidth": {
+      "value": "{borderWidth.md}",
+      "type": "borderWidth"
+    },
+    "buttonBorderStyle": {
+      "value": "solid",
+      "type": "text"
+    },
+    "buttonHoverBorderStyle": {
+      "value": "dashed",
+      "type": "text"
+    },
+    "buttonBorderRadius": {
+      "value": "0.5rem",
+      "type": "borderRadius"
+    },
+    "messageColor": {
+      "value": "{color.text.interactive.navigation.primary.base}",
+      "type": "color"
+    },
+    "messageColorClickable": {
+      "value": "{color.text.interactive.navigation.primary.base}",
+      "type": "color"
+    },
+    "clickableActiveBg": {
+      "value": "{color.background.interactive.action.primary.active}",
+      "type": "color"
+    },
+    "clickableActiveText": {
+      "value": "{color.text.onColor}",
+      "type": "color"
+    },
+    "messageFontSizeSmall": {
+      "value": "{fontSize.textSm}",
+      "type": "fontSizes"
+    },
+    "messageFontSizeMedium": {
+      "value": "{fontSize.textBase}",
+      "type": "fontSizes"
+    },
+    "messageFontSizeLarge": {
+      "value": "{fontSize.textLg}",
+      "type": "fontSizes"
+    }
+  }
+}

packages/ui-scripts/lib/build/tokensStudio/canvas/component/DataPermissionLevels.json

@@ -0,0 +1,52 @@
+{
+  "dataPermissionLevels": {
+    "cardBorderRadius": {
+      "value": "{borderRadius.sm}",
+      "type": "borderRadius"
+    },
+    "cardBorderColor": {
+      "value": "{color.stroke.muted}",
+      "type": "color"
+    },
+    "cardBorderWidth": {
+      "value": "{borderWidth.md}",
+      "type": "borderWidth"
+    },
+    "currentFeaturePaddingSides": {
+      "value": "{spacing.spaceMd}",
+      "type": "spacing"
+    },
+    "currentFeaturePaddingTopBottom": {
+      "value": "{spacing.spaceSm}",
+      "type": "spacing"
+    },
+    "permissionTitleBottomMargin": {
+      "value": "{spacing.spaceSm}",
+      "type": "spacing"
+    },
+    "levelColor": {
+      "value": "{color.text.aiColor}",
+      "type": "color"
+    },
+    "aiTextLeftGradientColor": {
+      "value": "{color.background.aiTopGradient}",
+      "type": "color"
+    },
+    "aiTextRightGradientColor": {
+      "value": "{color.background.aiBottomGradient}",
+      "type": "color"
+    },
+    "bodyPadding": {
+      "value": "{spacing.gap.cards.lg}",
+      "type": "spacing"
+    },
+    "contentContainerColor": {
+      "value": "{color.background.elevatedSurface.base}",
+      "type": "color"
+    },
+    "contentContainerBorderRadius": {
+      "value": "0rem",
+      "type": "borderRadius"
+    }
+  }
+}

packages/ui-scripts/lib/build/tokensStudio/canvas/component/NutritionFacts.json

@@ -0,0 +1,36 @@
+{
+  "nutritionFacts": {
+    "borderRadius": {
+      "value": "{borderRadius.md}",
+      "type": "borderRadius"
+    },
+    "cardBorderColor": {
+      "value": "{color.stroke.muted}",
+      "type": "color"
+    },
+    "cardBorderWidth": {
+      "value": "{borderWidth.sm}",
+      "type": "borderWidth"
+    },
+    "cardPadding": {
+      "value": "{spacing.gap.cards.sm}",
+      "type": "spacing"
+    },
+    "cardExplainerContainerBottomMargin": {
+      "value": "{spacing.spaceSm}",
+      "type": "spacing"
+    },
+    "cardGap": {
+      "value": "{spacing.spaceXl}",
+      "type": "spacing"
+    },
+    "bodyPadding": {
+      "value": "{spacing.padding.container.md}",
+      "type": "spacing"
+    },
+    "blockGap": {
+      "value": "{spacing.gap.cards.md}",
+      "type": "spacing"
+    }
+  }
+}