diff --git a/packages/ui-scripts/lib/build/tokensStudio/$metadata.json b/packages/ui-scripts/lib/build/tokensStudio/$metadata.json
index 6e177f176a..1282e5f447 100644
--- a/packages/ui-scripts/lib/build/tokensStudio/$metadata.json
+++ b/packages/ui-scripts/lib/build/tokensStudio/$metadata.json
@@ -42,6 +42,7 @@
     "canvas/component/TextArea",
     "canvas/component/TextInput",
     "canvas/component/Toggle",
+    "canvas/component/ToggleDetails",
     "canvas/component/Tooltip",
     "canvas/component/Tray",
     "canvas/component/TreeBrowser",
@@ -84,6 +85,7 @@
     "rebrand/component/TextArea",
     "rebrand/component/TextInput",
     "rebrand/component/Toggle",
+    "rebrand/component/ToggleDetails",
     "rebrand/component/Tooltip",
     "rebrand/component/Tray",
     "rebrand/component/TreeBrowser",
diff --git a/packages/ui-scripts/lib/build/tokensStudio/$themes.json b/packages/ui-scripts/lib/build/tokensStudio/$themes.json
index 6575e622d9..ca589e0fc8 100644
--- a/packages/ui-scripts/lib/build/tokensStudio/$themes.json
+++ b/packages/ui-scripts/lib/build/tokensStudio/$themes.json
@@ -47,7 +47,8 @@
       "canvas/component/Options": "enabled",
       "canvas/component/Flex": "enabled",
       "canvas/component/SourceCodeEditor": "enabled",
-      "canvas/component/TreeBrowser": "enabled"
+      "canvas/component/TreeBrowser": "enabled",
+      "canvas/component/ToggleDetails": "enabled"
     },
     "$figmaStyleReferences": {
       "primaryBg": "S:7bfe47b8656807754868fc09a300778c7b28a4ea,",
@@ -1594,6 +1595,17 @@
       "toggle.toggleBackground": "92a1161bb0de08d3d22969b73af244211ccffcf3",
       "toggle.toggleWidth": "de552d359a1f5f5a5d94702311cd16263ffb45c5",
       "toggle.disabledOpacity": "d20f915e19d670bf2769146fc653b5b993b1eab5",
+      "toggleDetails.fontFamily": "9fbdba8f5daaa5dfc8e09f46481b9c630bc9a508",
+      "toggleDetails.fontSizeLarge": "8c857b7569ad53101349a086dc14b6b167d50c5d",
+      "toggleDetails.fontSizeMedium": "edbaf5237ac368b9df61af56a9aad432a8eb8232",
+      "toggleDetails.fontSizeSmall": "cd5d76df392ef4047020f96dcbe187fd24201599",
+      "toggleDetails.fontWeight": "faa2eb2cd5cd6408ec20cc7c19b6d0d3ca5c32f6",
+      "toggleDetails.iconMargin": "95425a900f61036b057bfe428ef57123975532e4",
+      "toggleDetails.textColor": "59442fd8fca28b795f2b02d8866a9b5b895dad44",
+      "toggleDetails.toggleBorderRadius": "a7a054b05a52f82310156f07aa818ef8103593d5",
+      "toggleDetails.toggleBorderStyle": "fa7e404eeeb6f65e8e2cc232ba31e4abf14e089e",
+      "toggleDetails.toggleBorderWidth": "838a958ac4d60da1630bf1af6c69fcaeaae19918",
+      "toggleDetails.togglePadding": "8988e5173f18c1bd02a77fe8ad070827c4b90c3c",
       "tooltip.padding": "fed61eb256e58d79905560f8eb6ecd00d310add9",
       "tooltip.fontFamily": "d1ef8cea902e36c567d004e56f61d46817886ebc",
       "tooltip.fontWeight": "da0369dc2bea573afefe518d9cc21314c9ba0733",
@@ -1802,7 +1814,8 @@
       "canvas/component/Options": "enabled",
       "canvas/component/Flex": "enabled",
       "canvas/component/SourceCodeEditor": "enabled",
-      "canvas/component/TreeBrowser": "enabled"
+      "canvas/component/TreeBrowser": "enabled",
+      "canvas/component/ToggleDetails": "enabled"
     },
     "$figmaStyleReferences": {
       "primaryBg": "S:7bfe47b8656807754868fc09a300778c7b28a4ea,",
@@ -3285,6 +3298,17 @@
       "toggle.toggleBackground": "92a1161bb0de08d3d22969b73af244211ccffcf3",
       "toggle.toggleWidth": "de552d359a1f5f5a5d94702311cd16263ffb45c5",
       "toggle.disabledOpacity": "d20f915e19d670bf2769146fc653b5b993b1eab5",
+      "toggleDetails.fontFamily": "9fbdba8f5daaa5dfc8e09f46481b9c630bc9a508",
+      "toggleDetails.fontSizeLarge": "8c857b7569ad53101349a086dc14b6b167d50c5d",
+      "toggleDetails.fontSizeMedium": "edbaf5237ac368b9df61af56a9aad432a8eb8232",
+      "toggleDetails.fontSizeSmall": "cd5d76df392ef4047020f96dcbe187fd24201599",
+      "toggleDetails.fontWeight": "faa2eb2cd5cd6408ec20cc7c19b6d0d3ca5c32f6",
+      "toggleDetails.iconMargin": "95425a900f61036b057bfe428ef57123975532e4",
+      "toggleDetails.textColor": "59442fd8fca28b795f2b02d8866a9b5b895dad44",
+      "toggleDetails.toggleBorderRadius": "a7a054b05a52f82310156f07aa818ef8103593d5",
+      "toggleDetails.toggleBorderStyle": "fa7e404eeeb6f65e8e2cc232ba31e4abf14e089e",
+      "toggleDetails.toggleBorderWidth": "838a958ac4d60da1630bf1af6c69fcaeaae19918",
+      "toggleDetails.togglePadding": "8988e5173f18c1bd02a77fe8ad070827c4b90c3c",
       "tooltip.padding": "fed61eb256e58d79905560f8eb6ecd00d310add9",
       "tooltip.fontFamily": "d1ef8cea902e36c567d004e56f61d46817886ebc",
       "tooltip.fontWeight": "da0369dc2bea573afefe518d9cc21314c9ba0733",
@@ -3493,7 +3517,8 @@
       "rebrand/component/Table": "enabled",
       "rebrand/component/SourceCodeEditor": "enabled",
       "rebrand/component/Flex": "enabled",
-      "rebrand/component/TreeBrowser": "enabled"
+      "rebrand/component/TreeBrowser": "enabled",
+      "rebrand/component/ToggleDetails": "enabled"
     },
     "$figmaStyleReferences": {
       "elevation1": "S:0c22a809359ba629b2e09fde021efd3495cd9543,",
@@ -5125,6 +5150,17 @@
       "toggle.toggleBackground": "92a1161bb0de08d3d22969b73af244211ccffcf3",
       "toggle.padding": "0b28c6a14594d26423fd6711f3668c699c456690",
       "toggle.disabledOpacity": "d20f915e19d670bf2769146fc653b5b993b1eab5",
+      "toggleDetails.fontFamily": "9fbdba8f5daaa5dfc8e09f46481b9c630bc9a508",
+      "toggleDetails.fontSizeLarge": "8c857b7569ad53101349a086dc14b6b167d50c5d",
+      "toggleDetails.fontSizeMedium": "edbaf5237ac368b9df61af56a9aad432a8eb8232",
+      "toggleDetails.fontSizeSmall": "cd5d76df392ef4047020f96dcbe187fd24201599",
+      "toggleDetails.fontWeight": "faa2eb2cd5cd6408ec20cc7c19b6d0d3ca5c32f6",
+      "toggleDetails.iconMargin": "95425a900f61036b057bfe428ef57123975532e4",
+      "toggleDetails.textColor": "59442fd8fca28b795f2b02d8866a9b5b895dad44",
+      "toggleDetails.toggleBorderRadius": "a7a054b05a52f82310156f07aa818ef8103593d5",
+      "toggleDetails.toggleBorderStyle": "fa7e404eeeb6f65e8e2cc232ba31e4abf14e089e",
+      "toggleDetails.toggleBorderWidth": "838a958ac4d60da1630bf1af6c69fcaeaae19918",
+      "toggleDetails.togglePadding": "8988e5173f18c1bd02a77fe8ad070827c4b90c3c",
       "tooltip.fontFamily": "d1ef8cea902e36c567d004e56f61d46817886ebc",
       "tooltip.fontWeight": "da0369dc2bea573afefe518d9cc21314c9ba0733",
       "tooltip.fontSize": "d27af41a22f6473a8937991a58255844c64e7ac5",
@@ -5246,7 +5282,8 @@
       "rebrand/component/Table": "enabled",
       "rebrand/component/SourceCodeEditor": "enabled",
       "rebrand/component/Flex": "enabled",
-      "rebrand/component/TreeBrowser": "enabled"
+      "rebrand/component/TreeBrowser": "enabled",
+      "rebrand/component/ToggleDetails": "enabled"
     },
     "$figmaStyleReferences": {
       "avatar.boxShadow": "S:ce597b947227d2e4b1f0fa80d2b7be88a5987dc2,",
@@ -6814,6 +6851,17 @@
       "toggle.toggleBackground": "92a1161bb0de08d3d22969b73af244211ccffcf3",
       "toggle.padding": "0b28c6a14594d26423fd6711f3668c699c456690",
       "toggle.disabledOpacity": "d20f915e19d670bf2769146fc653b5b993b1eab5",
+      "toggleDetails.fontFamily": "9fbdba8f5daaa5dfc8e09f46481b9c630bc9a508",
+      "toggleDetails.fontSizeLarge": "8c857b7569ad53101349a086dc14b6b167d50c5d",
+      "toggleDetails.fontSizeMedium": "edbaf5237ac368b9df61af56a9aad432a8eb8232",
+      "toggleDetails.fontSizeSmall": "cd5d76df392ef4047020f96dcbe187fd24201599",
+      "toggleDetails.fontWeight": "faa2eb2cd5cd6408ec20cc7c19b6d0d3ca5c32f6",
+      "toggleDetails.iconMargin": "95425a900f61036b057bfe428ef57123975532e4",
+      "toggleDetails.textColor": "59442fd8fca28b795f2b02d8866a9b5b895dad44",
+      "toggleDetails.toggleBorderRadius": "a7a054b05a52f82310156f07aa818ef8103593d5",
+      "toggleDetails.toggleBorderStyle": "fa7e404eeeb6f65e8e2cc232ba31e4abf14e089e",
+      "toggleDetails.toggleBorderWidth": "838a958ac4d60da1630bf1af6c69fcaeaae19918",
+      "toggleDetails.togglePadding": "8988e5173f18c1bd02a77fe8ad070827c4b90c3c",
       "tooltip.fontFamily": "d1ef8cea902e36c567d004e56f61d46817886ebc",
       "tooltip.fontWeight": "da0369dc2bea573afefe518d9cc21314c9ba0733",
       "tooltip.fontSize": "d27af41a22f6473a8937991a58255844c64e7ac5",
diff --git a/packages/ui-scripts/lib/build/tokensStudio/canvas/component/ToggleDetails.json b/packages/ui-scripts/lib/build/tokensStudio/canvas/component/ToggleDetails.json
new file mode 100644
index 0000000000..d434d59b06
--- /dev/null
+++ b/packages/ui-scripts/lib/build/tokensStudio/canvas/component/ToggleDetails.json
@@ -0,0 +1,52 @@
+{
+  "toggleDetails": {
+    "fontFamily": {
+      "value": "{fontFamily.base}",
+      "type": "fontFamilies"
+    },
+    "fontSizeLarge": {
+      "value": "{fontSize.textLg}",
+      "type": "fontSizes"
+    },
+    "fontSizeMedium": {
+      "value": "{fontSize.textBase}",
+      "type": "fontSizes"
+    },
+    "fontSizeSmall": {
+      "value": "{fontSize.textSm}",
+      "type": "fontSizes"
+    },
+    "fontWeight": {
+      "value": "{fontWeight.body.base}",
+      "type": "fontWeights"
+    },
+    "iconMargin": {
+      "value": "0.375rem",
+      "type": "spacing"
+    },
+    "lineHeight": {
+      "value": "{lineHeight.paragraph.base}",
+      "type": "lineHeights"
+    },
+    "textColor": {
+      "value": "{color.text.base}",
+      "type": "color"
+    },
+    "toggleBorderRadius": {
+      "value": "{borderRadius.interactive.base}",
+      "type": "borderRadius"
+    },
+    "toggleBorderStyle": {
+      "value": "solid",
+      "type": "text"
+    },
+    "toggleBorderWidth": {
+      "value": "{borderWidth.md}",
+      "type": "borderWidth"
+    },
+    "togglePadding": {
+      "value": "0.375rem",
+      "type": "spacing"
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/ui-scripts/lib/build/tokensStudio/rebrand/component/RangeInput.json b/packages/ui-scripts/lib/build/tokensStudio/rebrand/component/RangeInput.json
index 7b4feb0f91..cd08dbe942 100644
--- a/packages/ui-scripts/lib/build/tokensStudio/rebrand/component/RangeInput.json
+++ b/packages/ui-scripts/lib/build/tokensStudio/rebrand/component/RangeInput.json
@@ -9,7 +9,7 @@
       "type": "color"
     },
     "handleFocusBackground": {
-      "value": "{color.background.brand}",
+      "value": "{color.background.info}",
       "type": "color"
     },
     "handleFocusOutlineColor": {
diff --git a/packages/ui-scripts/lib/build/tokensStudio/rebrand/component/ToggleDetails.json b/packages/ui-scripts/lib/build/tokensStudio/rebrand/component/ToggleDetails.json
new file mode 100644
index 0000000000..d434d59b06
--- /dev/null
+++ b/packages/ui-scripts/lib/build/tokensStudio/rebrand/component/ToggleDetails.json
@@ -0,0 +1,52 @@
+{
+  "toggleDetails": {
+    "fontFamily": {
+      "value": "{fontFamily.base}",
+      "type": "fontFamilies"
+    },
+    "fontSizeLarge": {
+      "value": "{fontSize.textLg}",
+      "type": "fontSizes"
+    },
+    "fontSizeMedium": {
+      "value": "{fontSize.textBase}",
+      "type": "fontSizes"
+    },
+    "fontSizeSmall": {
+      "value": "{fontSize.textSm}",
+      "type": "fontSizes"
+    },
+    "fontWeight": {
+      "value": "{fontWeight.body.base}",
+      "type": "fontWeights"
+    },
+    "iconMargin": {
+      "value": "0.375rem",
+      "type": "spacing"
+    },
+    "lineHeight": {
+      "value": "{lineHeight.paragraph.base}",
+      "type": "lineHeights"
+    },
+    "textColor": {
+      "value": "{color.text.base}",
+      "type": "color"
+    },
+    "toggleBorderRadius": {
+      "value": "{borderRadius.interactive.base}",
+      "type": "borderRadius"
+    },
+    "toggleBorderStyle": {
+      "value": "solid",
+      "type": "text"
+    },
+    "toggleBorderWidth": {
+      "value": "{borderWidth.md}",
+      "type": "borderWidth"
+    },
+    "togglePadding": {
+      "value": "0.375rem",
+      "type": "spacing"
+    }
+  }
+}
\ No newline at end of file