V12 component rework 32

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

@@ -34,6 +34,7 @@
     "canvas/component/RadioInput",
     "canvas/component/RangeInput",
     "canvas/component/SharedTokens",
+    "canvas/component/SideNavBar",
     "canvas/component/SourceCodeEditor",
     "canvas/component/Spinner",
     "canvas/component/Table",
@@ -80,6 +81,7 @@
     "rebrand/component/RadioInput",
     "rebrand/component/RangeInput",
     "rebrand/component/SharedTokens",
+    "rebrand/component/SideNavBar",
     "rebrand/component/Spinner",
     "rebrand/component/Tabs",
     "rebrand/component/Tag",

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

@@ -49,7 +49,8 @@
       "canvas/component/SourceCodeEditor": "enabled",
       "canvas/component/TreeBrowser": "enabled",
       "canvas/component/ToggleDetails": "enabled",
-      "canvas/component/Alert": "enabled"
+      "canvas/component/Alert": "enabled",
+      "canvas/component/SideNavBar": "enabled"
     },
     "$figmaStyleReferences": {
       "primaryBg": "S:7bfe47b8656807754868fc09a300778c7b28a4ea,",
@@ -568,7 +569,7 @@
       "alert.dangerBorderColor": "6882c1ef82d5cc3c42af4f67f14487e2298374c8",
       "alert.dangerIconBackground": "2b060a0168fde35fcd9629641cef4945e12f93e9",
       "alert.iconColor": "97ec2abafb21b8c69166c1b44d3674fbcfb50cfa",
-      "alert.infoBoderColor": "9d95a17de5e011061638f8883036611a02dfbb99",
+      "alert.infoBorderColor": "9d95a17de5e011061638f8883036611a02dfbb99",
       "alert.infoIconBackground": "b21d0b83d5a429ce83f923fbc7351fa24016e90a",
       "alert.successBorderColor": "0b8397f43f640c6887fa4cc718d2df279a168615",
       "alert.successIconBackground": "d38b5cdea5a2dd98e81b95310d75a651c1f5154a",
@@ -923,6 +924,9 @@
       "fileDrop.hoverBorderColor": "3d2adfc11c375e9dd3270793fa9be3145491f191",
       "fileDrop.rejectedColor": "988ec00262493ac39cc18f8bdbc6ab6a7864056f",
       "flex.fontFamily": "6ca9abd4af41fdd3e9e7b1ddf942587aa127a432",
+      "grid.spacingLarge": "056491e166e27093312f5a1e8689fa4e33e93313",
+      "grid.spacingMedium": "8d8a73ad2545bec95ebaa5c63f3e5ec13e91373f",
+      "grid.spacingSmall": "2cc665e4db8fc2e11b9b47994fcee4d0afd430df",
       "gridCol.spacingLarge": "6740a19f93acd0f27b29c7d963a73d86af225f5f",
       "gridCol.spacingMedium": "9e0a67555ce787b1e86aa8da5599f1affda26326",
       "gridCol.spacingSmall": "7622c74b0fac3a137eedf84c3a4b429d34d58b34",
@@ -1397,6 +1401,21 @@
       "sharedTokens.widthSmall": "c476d9f514596b2e55e912b556608b4a7a695307",
       "sharedTokens.widthMedium": "188d4104eda0da3cb1264cd20e58698e9806564e",
       "sharedTokens.widthLarge": "cb9b59fa4194b70716420d7d26ad2f61da58aa09",
+      "sideNavBar.backgroundColor": "0b409318a216880de40e553f1fe893c9b56f4be0",
+      "sideNavBar.fill": "3c90de5f5ba1ea1bd12cdae72aca4e34c484352e",
+      "sideNavBar.fontColor": "8870280a832392342d77f00a6974a2a1f52cdc12",
+      "sideNavBar.width": "de85066fbeaf867b52548a6c35582ef13deec237",
+      "sideNavBarItem.contentPadding": "c539459a61efa77cc72509373eac1da78f357030",
+      "sideNavBarItem.fontColor": "106ea839858692f95af33e60dbd6260506330a59",
+      "sideNavBarItem.fontFamily": "cf0d276a49b02670f8821ab3f2edf5867e04ff0a",
+      "sideNavBarItem.fontSize": "588c3f9169f3233534e590476e9e959d9a8978e4",
+      "sideNavBarItem.fontWeight": "0a18af9fc098c807fa1a22535d3184f9c7f1f516",
+      "sideNavBarItem.hoverBackgroundColor": "3ec5f4e29fde3cb1b3daed8ee70f5941eaf3d105",
+      "sideNavBarItem.iconColor": "f2c0f2233d2aacd68206a927fdfd4d88034ff8ab",
+      "sideNavBarItem.iconSize": "5487ad9c50f5034c44a69f58167d7b35bc7da71e",
+      "sideNavBarItem.selectedBackgroundColor": "217c3c2d60763dd250a7b153ea9c3bd2ab6f0acd",
+      "sideNavBarItem.selectedFontColor": "c7f0f4654918adc5397bb0dc214ad97a46a6d2e8",
+      "sideNavBarItem.selectedIconColor": "2276da0c297559c488c7852c4df2cb40e7810d45",
       "spinner.color": "fe35cee7f44f5160047f23b08d9aedcfa1627fa9",
       "spinner.inverseColor": "1ed9ec47561d71a46637ce34e32d2c0ebe02e85a",
       "spinner.trackColor": "e5c9a4016100c58fa7082a2ead97e06d0339ff07",
@@ -1823,7 +1842,8 @@
       "canvas/component/SourceCodeEditor": "enabled",
       "canvas/component/TreeBrowser": "enabled",
       "canvas/component/ToggleDetails": "enabled",
-      "canvas/component/Alert": "enabled"
+      "canvas/component/Alert": "enabled",
+      "canvas/component/SideNavBar": "enabled"
     },
     "$figmaStyleReferences": {
       "primaryBg": "S:7bfe47b8656807754868fc09a300778c7b28a4ea,",
@@ -2278,7 +2298,7 @@
       "alert.dangerBorderColor": "6882c1ef82d5cc3c42af4f67f14487e2298374c8",
       "alert.dangerIconBackground": "2b060a0168fde35fcd9629641cef4945e12f93e9",
       "alert.iconColor": "97ec2abafb21b8c69166c1b44d3674fbcfb50cfa",
-      "alert.infoBoderColor": "9d95a17de5e011061638f8883036611a02dfbb99",
+      "alert.infoBorderColor": "9d95a17de5e011061638f8883036611a02dfbb99",
       "alert.infoIconBackground": "b21d0b83d5a429ce83f923fbc7351fa24016e90a",
       "alert.successBorderColor": "0b8397f43f640c6887fa4cc718d2df279a168615",
       "alert.successIconBackground": "d38b5cdea5a2dd98e81b95310d75a651c1f5154a",
@@ -2633,6 +2653,9 @@
       "fileDrop.hoverBorderColor": "3d2adfc11c375e9dd3270793fa9be3145491f191",
       "fileDrop.rejectedColor": "988ec00262493ac39cc18f8bdbc6ab6a7864056f",
       "flex.fontFamily": "6ca9abd4af41fdd3e9e7b1ddf942587aa127a432",
+      "grid.spacingLarge": "056491e166e27093312f5a1e8689fa4e33e93313",
+      "grid.spacingMedium": "8d8a73ad2545bec95ebaa5c63f3e5ec13e91373f",
+      "grid.spacingSmall": "2cc665e4db8fc2e11b9b47994fcee4d0afd430df",
       "gridCol.spacingLarge": "6740a19f93acd0f27b29c7d963a73d86af225f5f",
       "gridCol.spacingMedium": "9e0a67555ce787b1e86aa8da5599f1affda26326",
       "gridCol.spacingSmall": "7622c74b0fac3a137eedf84c3a4b429d34d58b34",
@@ -3107,6 +3130,21 @@
       "sharedTokens.widthSmall": "c476d9f514596b2e55e912b556608b4a7a695307",
       "sharedTokens.widthMedium": "188d4104eda0da3cb1264cd20e58698e9806564e",
       "sharedTokens.widthLarge": "cb9b59fa4194b70716420d7d26ad2f61da58aa09",
+      "sideNavBar.backgroundColor": "0b409318a216880de40e553f1fe893c9b56f4be0",
+      "sideNavBar.fill": "3c90de5f5ba1ea1bd12cdae72aca4e34c484352e",
+      "sideNavBar.fontColor": "8870280a832392342d77f00a6974a2a1f52cdc12",
+      "sideNavBar.width": "de85066fbeaf867b52548a6c35582ef13deec237",
+      "sideNavBarItem.contentPadding": "c539459a61efa77cc72509373eac1da78f357030",
+      "sideNavBarItem.fontColor": "106ea839858692f95af33e60dbd6260506330a59",
+      "sideNavBarItem.fontFamily": "cf0d276a49b02670f8821ab3f2edf5867e04ff0a",
+      "sideNavBarItem.fontSize": "588c3f9169f3233534e590476e9e959d9a8978e4",
+      "sideNavBarItem.fontWeight": "0a18af9fc098c807fa1a22535d3184f9c7f1f516",
+      "sideNavBarItem.hoverBackgroundColor": "3ec5f4e29fde3cb1b3daed8ee70f5941eaf3d105",
+      "sideNavBarItem.iconColor": "f2c0f2233d2aacd68206a927fdfd4d88034ff8ab",
+      "sideNavBarItem.iconSize": "5487ad9c50f5034c44a69f58167d7b35bc7da71e",
+      "sideNavBarItem.selectedBackgroundColor": "217c3c2d60763dd250a7b153ea9c3bd2ab6f0acd",
+      "sideNavBarItem.selectedFontColor": "c7f0f4654918adc5397bb0dc214ad97a46a6d2e8",
+      "sideNavBarItem.selectedIconColor": "2276da0c297559c488c7852c4df2cb40e7810d45",
       "spinner.color": "fe35cee7f44f5160047f23b08d9aedcfa1627fa9",
       "spinner.inverseColor": "1ed9ec47561d71a46637ce34e32d2c0ebe02e85a",
       "spinner.trackColor": "e5c9a4016100c58fa7082a2ead97e06d0339ff07",
@@ -3533,7 +3571,8 @@
       "rebrand/component/Flex": "enabled",
       "rebrand/component/TreeBrowser": "enabled",
       "rebrand/component/ToggleDetails": "enabled",
-      "rebrand/component/Alert": "enabled"
+      "rebrand/component/Alert": "enabled",
+      "rebrand/component/SideNavBar": "enabled"
     },
     "$figmaStyleReferences": {
       "elevation1": "S:0c22a809359ba629b2e09fde021efd3495cd9543,",
@@ -4082,7 +4121,7 @@
       "alert.dangerBorderColor": "6882c1ef82d5cc3c42af4f67f14487e2298374c8",
       "alert.dangerIconBackground": "2b060a0168fde35fcd9629641cef4945e12f93e9",
       "alert.iconColor": "97ec2abafb21b8c69166c1b44d3674fbcfb50cfa",
-      "alert.infoBoderColor": "9d95a17de5e011061638f8883036611a02dfbb99",
+      "alert.infoBorderColor": "9d95a17de5e011061638f8883036611a02dfbb99",
       "alert.infoIconBackground": "b21d0b83d5a429ce83f923fbc7351fa24016e90a",
       "alert.successBorderColor": "0b8397f43f640c6887fa4cc718d2df279a168615",
       "alert.successIconBackground": "d38b5cdea5a2dd98e81b95310d75a651c1f5154a",
@@ -4454,6 +4493,9 @@
       "formFieldMessage.lineHeight": "4877a457ef96d25c2430aa7ae69bc25451a6f749",
       "formFieldMessage.fontFamily": "fc549ba82a84fb741eaf3c6ff5ca1191ececfe0f",
       "flex.fontFamily": "6ca9abd4af41fdd3e9e7b1ddf942587aa127a432",
+      "grid.spacingLarge": "056491e166e27093312f5a1e8689fa4e33e93313",
+      "grid.spacingMedium": "8d8a73ad2545bec95ebaa5c63f3e5ec13e91373f",
+      "grid.spacingSmall": "2cc665e4db8fc2e11b9b47994fcee4d0afd430df",
       "gridCol.spacingLarge": "6740a19f93acd0f27b29c7d963a73d86af225f5f",
       "gridCol.spacingMedium": "9e0a67555ce787b1e86aa8da5599f1affda26326",
       "gridCol.spacingSmall": "7622c74b0fac3a137eedf84c3a4b429d34d58b34",
@@ -4911,6 +4953,21 @@
       "sharedTokens.widthSmall": "c476d9f514596b2e55e912b556608b4a7a695307",
       "sharedTokens.widthMedium": "188d4104eda0da3cb1264cd20e58698e9806564e",
       "sharedTokens.widthLarge": "cb9b59fa4194b70716420d7d26ad2f61da58aa09",
+      "sideNavBar.backgroundColor": "0b409318a216880de40e553f1fe893c9b56f4be0",
+      "sideNavBar.fill": "3c90de5f5ba1ea1bd12cdae72aca4e34c484352e",
+      "sideNavBar.fontColor": "8870280a832392342d77f00a6974a2a1f52cdc12",
+      "sideNavBar.width": "de85066fbeaf867b52548a6c35582ef13deec237",
+      "sideNavBarItem.contentPadding": "c539459a61efa77cc72509373eac1da78f357030",
+      "sideNavBarItem.fontColor": "106ea839858692f95af33e60dbd6260506330a59",
+      "sideNavBarItem.fontFamily": "cf0d276a49b02670f8821ab3f2edf5867e04ff0a",
+      "sideNavBarItem.fontSize": "588c3f9169f3233534e590476e9e959d9a8978e4",
+      "sideNavBarItem.fontWeight": "0a18af9fc098c807fa1a22535d3184f9c7f1f516",
+      "sideNavBarItem.hoverBackgroundColor": "3ec5f4e29fde3cb1b3daed8ee70f5941eaf3d105",
+      "sideNavBarItem.iconColor": "f2c0f2233d2aacd68206a927fdfd4d88034ff8ab",
+      "sideNavBarItem.iconSize": "5487ad9c50f5034c44a69f58167d7b35bc7da71e",
+      "sideNavBarItem.selectedBackgroundColor": "217c3c2d60763dd250a7b153ea9c3bd2ab6f0acd",
+      "sideNavBarItem.selectedFontColor": "c7f0f4654918adc5397bb0dc214ad97a46a6d2e8",
+      "sideNavBarItem.selectedIconColor": "2276da0c297559c488c7852c4df2cb40e7810d45",
       "sourceCodeEditor.background": "753bcadd249cf00e7907044d50f6948a0e69b095",
       "sourceCodeEditor.borderColor": "87cf90ef8c27fe5c12764a7a5656f66d1aefd83b",
       "sourceCodeEditor.borderRadius": "9f0848b8ed3d6789ce7c71447d10a2ee54b6eccf",
@@ -5305,7 +5362,8 @@
       "rebrand/component/Flex": "enabled",
       "rebrand/component/TreeBrowser": "enabled",
       "rebrand/component/ToggleDetails": "enabled",
-      "rebrand/component/Alert": "enabled"
+      "rebrand/component/Alert": "enabled",
+      "rebrand/component/SideNavBar": "enabled"
     },
     "$figmaStyleReferences": {
       "avatar.boxShadow": "S:ce597b947227d2e4b1f0fa80d2b7be88a5987dc2,",
@@ -5790,7 +5848,7 @@
       "alert.dangerBorderColor": "6882c1ef82d5cc3c42af4f67f14487e2298374c8",
       "alert.dangerIconBackground": "2b060a0168fde35fcd9629641cef4945e12f93e9",
       "alert.iconColor": "97ec2abafb21b8c69166c1b44d3674fbcfb50cfa",
-      "alert.infoBoderColor": "9d95a17de5e011061638f8883036611a02dfbb99",
+      "alert.infoBorderColor": "9d95a17de5e011061638f8883036611a02dfbb99",
       "alert.infoIconBackground": "b21d0b83d5a429ce83f923fbc7351fa24016e90a",
       "alert.successBorderColor": "0b8397f43f640c6887fa4cc718d2df279a168615",
       "alert.successIconBackground": "d38b5cdea5a2dd98e81b95310d75a651c1f5154a",
@@ -6162,6 +6220,9 @@
       "formFieldMessage.lineHeight": "4877a457ef96d25c2430aa7ae69bc25451a6f749",
       "formFieldMessage.fontFamily": "fc549ba82a84fb741eaf3c6ff5ca1191ececfe0f",
       "flex.fontFamily": "6ca9abd4af41fdd3e9e7b1ddf942587aa127a432",
+      "grid.spacingLarge": "056491e166e27093312f5a1e8689fa4e33e93313",
+      "grid.spacingMedium": "8d8a73ad2545bec95ebaa5c63f3e5ec13e91373f",
+      "grid.spacingSmall": "2cc665e4db8fc2e11b9b47994fcee4d0afd430df",
       "gridCol.spacingLarge": "6740a19f93acd0f27b29c7d963a73d86af225f5f",
       "gridCol.spacingMedium": "9e0a67555ce787b1e86aa8da5599f1affda26326",
       "gridCol.spacingSmall": "7622c74b0fac3a137eedf84c3a4b429d34d58b34",
@@ -6619,6 +6680,21 @@
       "sharedTokens.widthSmall": "c476d9f514596b2e55e912b556608b4a7a695307",
       "sharedTokens.widthMedium": "188d4104eda0da3cb1264cd20e58698e9806564e",
       "sharedTokens.widthLarge": "cb9b59fa4194b70716420d7d26ad2f61da58aa09",
+      "sideNavBar.backgroundColor": "0b409318a216880de40e553f1fe893c9b56f4be0",
+      "sideNavBar.fill": "3c90de5f5ba1ea1bd12cdae72aca4e34c484352e",
+      "sideNavBar.fontColor": "8870280a832392342d77f00a6974a2a1f52cdc12",
+      "sideNavBar.width": "de85066fbeaf867b52548a6c35582ef13deec237",
+      "sideNavBarItem.contentPadding": "c539459a61efa77cc72509373eac1da78f357030",
+      "sideNavBarItem.fontColor": "106ea839858692f95af33e60dbd6260506330a59",
+      "sideNavBarItem.fontFamily": "cf0d276a49b02670f8821ab3f2edf5867e04ff0a",
+      "sideNavBarItem.fontSize": "588c3f9169f3233534e590476e9e959d9a8978e4",
+      "sideNavBarItem.fontWeight": "0a18af9fc098c807fa1a22535d3184f9c7f1f516",
+      "sideNavBarItem.hoverBackgroundColor": "3ec5f4e29fde3cb1b3daed8ee70f5941eaf3d105",
+      "sideNavBarItem.iconColor": "f2c0f2233d2aacd68206a927fdfd4d88034ff8ab",
+      "sideNavBarItem.iconSize": "5487ad9c50f5034c44a69f58167d7b35bc7da71e",
+      "sideNavBarItem.selectedBackgroundColor": "217c3c2d60763dd250a7b153ea9c3bd2ab6f0acd",
+      "sideNavBarItem.selectedFontColor": "c7f0f4654918adc5397bb0dc214ad97a46a6d2e8",
+      "sideNavBarItem.selectedIconColor": "2276da0c297559c488c7852c4df2cb40e7810d45",
       "sourceCodeEditor.background": "753bcadd249cf00e7907044d50f6948a0e69b095",
       "sourceCodeEditor.borderColor": "87cf90ef8c27fe5c12764a7a5656f66d1aefd83b",
       "sourceCodeEditor.borderRadius": "9f0848b8ed3d6789ce7c71447d10a2ee54b6eccf",

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

@@ -56,18 +56,14 @@
       "value": "{color.icon.onColor}",
       "type": "color"
     },
-    "infoBoderColor": {
+    "infoBorderColor": {
       "value": "{color.stroke.info}",
       "type": "color"
     },
     "infoIconBackground": {
       "value": "{color.background.info}",
       "type": "color"
     },
-    "marginTop": {
-      "value": "0.75rem",
-      "type": "other"
-    },
     "successBorderColor": {
       "value": "{color.stroke.success}",
       "type": "color"

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

@@ -17,7 +17,7 @@
       "type": "color"
     },
     "arrowBorderColor": {
-      "value": "{color.stroke.base}",
+      "value": "{color.stroke.muted}",
       "type": "color"
     },
     "arrowBorderColorInverse": {

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

@@ -39,15 +39,15 @@
       "type": "other"
     },
     "spacingLarge": {
-      "value": "1.125rem",
+      "value": "2.25rem",
       "type": "spacing"
     },
     "spacingMedium": {
-      "value": "{spacing.spaceMd}",
+      "value": "{spacing.spaceXl}",
       "type": "spacing"
     },
     "spacingSmall": {
-      "value": "0.375rem",
+      "value": "{spacing.spaceMd}",
       "type": "spacing"
     }
   },

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

@@ -0,0 +1,107 @@
+{
+  "sideNavBar": {
+    "backgroundColor": {
+      "value": "{color.background.elevatedSurface.base}",
+      "type": "color"
+    },
+    "fill": {
+      "value": "{color.background.brand}",
+      "type": "color"
+    },
+    "fontColor": {
+      "value": "{color.text.base}",
+      "type": "color"
+    },
+    "marginBottom": {
+      "value": "0.75rem",
+      "type": "other"
+    },
+    "minimizedWidth": {
+      "value": "3.375rem",
+      "type": "other"
+    },
+    "toggleTransition": {
+      "value": "300ms",
+      "type": "other"
+    },
+    "width": {
+      "value": "5.25rem",
+      "type": "sizing"
+    }
+  },
+  "sideNavBarItem": {
+    "backgroundColor": {
+      "value": "transparent",
+      "type": "other"
+    },
+    "contentPadding": {
+      "value": "{spacing.spaceSm}",
+      "type": "spacing"
+    },
+    "fontColor": {
+      "value": "{color.text.base}",
+      "type": "color"
+    },
+    "fontFamily": {
+      "value": "{fontFamily.base}",
+      "type": "fontFamilies"
+    },
+    "fontSize": {
+      "value": "{fontSize.textSm}",
+      "type": "fontSizes"
+    },
+    "fontWeight": {
+      "value": "{fontWeight.body.base}",
+      "type": "fontWeights"
+    },
+    "hoverBackgroundColor": {
+      "value": "{color.background.interactive.action.tertiary.hover}",
+      "type": "color"
+    },
+    "iconColor": {
+      "value": "{color.icon.onColor}",
+      "type": "color"
+    },
+    "iconSize": {
+      "value": "1.625rem",
+      "type": "sizing"
+    },
+    "innerFocusOutline": {
+      "value": "inset 0 0 0 0.25rem #FFFFFF",
+      "type": "other",
+      "description": "code only token"
+    },
+    "lineHeight": {
+      "value": "{lineHeight.paragraph.base}",
+      "type": "lineHeights"
+    },
+    "linkTextDecoration": {
+      "value": "none",
+      "type": "other"
+    },
+    "outerFocusOutline": {
+      "value": "inset 0 0 0 0.125rem #6A7883",
+      "type": "other"
+    },
+    "selectedBackgroundColor": {
+      "value": "{color.background.brand}",
+      "type": "color"
+    },
+    "selectedFontColor": {
+      "value": "{color.text.onColor}",
+      "type": "color"
+    },
+    "selectedIconColor": {
+      "value": "{color.icon.onColor}",
+      "type": "color"
+    },
+    "selectedInnerFocusOutline": {
+      "value": "inset 0 0 0 0.25rem #2B7ABC",
+      "type": "other"
+    },
+    "selectedOuterFocusOutline": {
+      "value": "inset 0 0 0 0.125rem #FFFFFF",
+      "type": "other"
+    }
+  }
+}

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

@@ -13,11 +13,11 @@
       "type": "color"
     },
     "borderColorPrimary": {
-      "value": "{color.stroke.base}",
+      "value": "{color.stroke.muted}",
       "type": "color"
     },
     "borderColorSecondary": {
-      "value": "{color.stroke.muted}",
+      "value": "{color.stroke.base}",
       "type": "color"
     },
     "borderColorSuccess": {
@@ -53,7 +53,7 @@
       "type": "color"
     },
     "backgroundPrimary": {
-      "value": "{color.background.base}",
+      "value": "{color.background.elevatedSurface.base}",
       "type": "color"
     },
     "backgroundSecondary": {