docs(many): migrate v2 component examples to the new spacing scale

Replace the deprecated canvas spacing keywords (small, medium, large,
x-small, x-large, xx-large) with general.* Spacing tokens, and the
deprecated icon size keyword (medium) with the semantic "md", across the
v2 component README examples so the published docs stop teaching
deprecated values.

INSTUI-5118

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: git-nandor

packages/ui-alerts/src/Alert/v2/README.md

@@ -187,11 +187,11 @@ When Alerts are used inline, the shadow can be removed with the `hasShadow` prop
 ---
 type: example
 ---
-<View as="div" background="primary" padding="large">
+<View as="div" background="primary" padding="general.space2xl">
   <View
     as="div"
     background="primary"
-    padding="small medium"
+    padding="general.spaceMd general.spaceXl"
     borderWidth="small"
     borderRadius="small"
     margin="general.spaceSm 0"
@@ -209,7 +209,7 @@ type: example
   <View
     as="div"
     background="primary"
-    padding="small medium"
+    padding="general.spaceMd general.spaceXl"
     borderWidth="small"
     borderRadius="small"
     margin="general.spaceSm 0"

packages/ui-avatar/src/Avatar/v2/README.md

@@ -15,7 +15,7 @@ readonly: true
 ---
 
 <div>
-  <View display="block" padding="small medium" background="primary">
+  <View display="block" padding="general.spaceMd general.spaceXl" background="primary">
     <Avatar name="Arthur C. Clarke" />
     <Avatar name="James Arias" color="accent2" />
     <Avatar name="Charles Kimball" color="accent3" />
@@ -24,7 +24,7 @@ readonly: true
     <Avatar name="David Herbert" color="accent6" />
     <Avatar name="Isaac Asimov" color="accent1" />
   </View>
-  <View display="block" padding="small medium" background="primary">
+  <View display="block" padding="general.spaceMd general.spaceXl" background="primary">
     <Avatar name="Arthur C. Clarke" hasInverseColor />
     <Avatar name="James Arias" color="accent2" hasInverseColor />
     <Avatar name="Charles Kimball" color="accent3" hasInverseColor />
@@ -45,7 +45,7 @@ There is a need for special, `ai avatars`. These have a specific look. You can a
 type: example
 readonly: true
 ---
-<View display="block" padding="small medium" background="primary">
+<View display="block" padding="general.spaceMd general.spaceXl" background="primary">
   <Avatar size="xx-small" color="ai" name="AI Assistant" renderIcon={IgniteaiLogoInstUIIcon} />
   <Avatar size="x-small" color="ai" name="AI Assistant" renderIcon={IgniteaiLogoInstUIIcon} />
   <Avatar size="small" color="ai" name="AI Assistant" renderIcon={IgniteaiLogoInstUIIcon} />
@@ -65,7 +65,7 @@ Lucide icons in Avatar are automatically sized and colored according to the Avat
 type: example
 ---
 <div>
-  <View display="block" padding="small medium">
+  <View display="block" padding="general.spaceMd general.spaceXl">
     <Avatar name="User Avatar" size="xx-small" renderIcon={UserInstUIIcon} />
     <Avatar name="User Avatar" size="x-small" renderIcon={UserInstUIIcon} />
     <Avatar name="User Avatar" size="small" renderIcon={UserInstUIIcon} />
@@ -74,12 +74,12 @@ type: example
     <Avatar name="User Avatar" size="x-large" renderIcon={UserInstUIIcon} />
     <Avatar name="User Avatar" size="xx-large" renderIcon={UserInstUIIcon} />
   </View>
-  <View display="block" padding="small medium">
+  <View display="block" padding="general.spaceMd general.spaceXl">
     <Avatar name="Profile" size="small" color="accent2" renderIcon={<CircleUserInstUIIcon />} />
     <Avatar name="Group" size="medium" color="accent3" renderIcon={<UsersInstUIIcon />} />
     <Avatar name="Settings" size="large" color="accent4" renderIcon={<SettingsInstUIIcon />} />
   </View>
-  <View display="block" padding="small medium">
+  <View display="block" padding="general.spaceMd general.spaceXl">
     <Avatar name="Profile" size="large" color="accent4" renderIcon={()=><CircleUserInstUIIcon />} />
     <Avatar name="Group" size="x-large" color="accent5" renderIcon={()=><UsersInstUIIcon />} />
     <Avatar name="Settings" size="xx-large" color="accent6" renderIcon={()=><SettingsInstUIIcon />} />
@@ -96,7 +96,7 @@ The `size` prop allows you to select from `xx-small`, `x-small`, `small`, `mediu
 type: example
 ---
 <div>
-  <View display="block" padding="small medium">
+  <View display="block" padding="general.spaceMd general.spaceXl">
     <Avatar name="Arthur C. Clarke" size="xx-small" />
     <Avatar name="James Arias" size="x-small" />
     <Avatar name="Charles Kimball" size="small" />
@@ -105,7 +105,7 @@ type: example
     <Avatar name="David Herbert" size="x-large" />
     <Avatar name="Isaac Asimov" size="xx-large" />
   </View>
-  <View display="block" padding="small medium" background="primary">
+  <View display="block" padding="general.spaceMd general.spaceXl" background="primary">
     <Avatar name="Arthur C. Clarke" size="xx-small" src={avatarSquare} />
     <Avatar name="James Arias" size="x-small" src={avatarSquare} />
     <Avatar name="Charles Kimball" size="small" src={avatarSquare} />
@@ -114,7 +114,7 @@ type: example
     <Avatar name="David Herbert" size="x-large" src={avatarSquare} />
     <Avatar name="Isaac Asimov" size="xx-large" src={avatarSquare} />
   </View>
-  <View display="block" padding="small medium">
+  <View display="block" padding="general.spaceMd general.spaceXl">
     <Avatar name="Arthur C. Clarke" renderIcon={UsersInstUIIcon} size="xx-small" />
     <Avatar name="James Arias" renderIcon={UsersInstUIIcon} size="x-small" />
     <Avatar name="Charles Kimball" renderIcon={UsersInstUIIcon} size="small" />
@@ -135,7 +135,7 @@ The color of the initials and icons can be set with the `color` prop, and it all
 type: example
 ---
 <div>
-  <View display="block" padding="small medium">
+  <View display="block" padding="general.spaceMd general.spaceXl">
     <Avatar name="Arthur C. Clarke" />
     <Avatar name="James Arias" color="accent2" />
     <Avatar name="Charles Kimball" color="accent3" />
@@ -144,7 +144,7 @@ type: example
     <Avatar name="David Herbert" color="accent6" />
     <Avatar name="Isaac Asimov" color="accent1" />
   </View>
-  <View display="block" padding="small medium">
+  <View display="block" padding="general.spaceMd general.spaceXl">
     <Avatar renderIcon={UsersInstUIIcon} name="Arthur C. Clarke" />
     <Avatar renderIcon={UsersInstUIIcon} name="James Arias" color="accent2" />
     <Avatar renderIcon={UsersInstUIIcon} name="Charles Kimball" color="accent3" />
@@ -165,7 +165,7 @@ Inverted Avatars have **no border**.
 type: example
 ---
 <div>
-  <View display="block" padding="small medium" background="primary">
+  <View display="block" padding="general.spaceMd general.spaceXl" background="primary">
     <Avatar name="Arthur C. Clarke" hasInverseColor />
     <Avatar name="James Arias" color="accent2" hasInverseColor />
     <Avatar name="Charles Kimball" color="accent3" hasInverseColor />
@@ -174,7 +174,7 @@ type: example
     <Avatar name="David Herbert" color="accent6" hasInverseColor />
     <Avatar name="Isaac Asimov" color="accent1" hasInverseColor />
   </View>
-  <View display="block" padding="small medium" background="primary">
+  <View display="block" padding="general.spaceMd general.spaceXl" background="primary">
     <Avatar renderIcon={UsersInstUIIcon} name="Arthur C. Clarke" hasInverseColor />
     <Avatar renderIcon={UsersInstUIIcon} name="James Arias" color="accent2" hasInverseColor />
     <Avatar renderIcon={UsersInstUIIcon} name="Charles Kimball" color="accent3" hasInverseColor />

packages/ui-badge/src/Badge/v2/README.md

@@ -79,7 +79,7 @@ Setting `type="notification"` will render small circles that should not contain
 type: example
 ---
 <div>
-  <Flex padding='small' display='inline-flex' alignItems="center">
+  <Flex padding='general.spaceMd' display='inline-flex' alignItems="center">
     <Badge standalone count={6} margin='0 general.spaceMd 0 0' />
     <Badge
       type="notification"
@@ -89,7 +89,7 @@ type: example
       }}
     />
   </Flex>
-  <Flex padding='small' display='inline-flex' alignItems="center">
+  <Flex padding='general.spaceMd' display='inline-flex' alignItems="center">
     <Badge standalone variant="success" count={12} margin='0 general.spaceMd 0 0' />
     <Badge
       variant="success"
@@ -100,7 +100,7 @@ type: example
       }}
     />
   </Flex>
-  <Flex padding='small' display='inline-flex' alignItems="center">
+  <Flex padding='general.spaceMd' display='inline-flex' alignItems="center">
     <Badge standalone variant="danger" count={18} countUntil={10} margin='0 general.spaceMd 0 0' />
     <Badge
       variant="danger"
@@ -112,7 +112,7 @@ type: example
     />
   </Flex>
   <View display='inline-flex' background='primary-inverse'>
-    <Flex padding='small' display='inline-flex' alignItems="center" background='primary-inverse'>
+    <Flex padding='general.spaceMd' display='inline-flex' alignItems="center" background='primary-inverse'>
       <Badge standalone variant="inverse" count={8} margin='0 general.spaceMd 0 0' />
       <Badge
         variant="inverse"

packages/ui-breadcrumb/src/Breadcrumb/v2/README.md

@@ -35,7 +35,7 @@ type: example
         <Link
           href="#"
           variant="standalone"
-          renderIcon={IconArrowOpenStartLine}
+          renderIcon={ChevronLeftInstUIIcon}
         >
           <TruncateText>University of Utah Colleges</TruncateText>
         </Link>

packages/ui-buttons/src/Button/v2/README.md

@@ -37,7 +37,7 @@ The `primary-inverse` color is designed for use on colored backgrounds. It provi
 ---
 type: example
 ---
-<View display="block" background="info" padding="small">
+<View display="block" background="info" padding="general.spaceMd">
   <Button color="primary-inverse" margin="general.spaceMd">Primary Inverse</Button>
 </View>
 ```
@@ -110,7 +110,7 @@ type: example
   display="block"
   width="10rem"
   margin="general.spaceMd"
-  padding="small none"
+  padding="general.spaceMd none"
   withVisualDebug
 >
   <Button color="primary">
@@ -147,7 +147,7 @@ type: example
         display="block"
         width="10rem"
         margin="general.spaceMd"
-        padding="small none"
+        padding="general.spaceMd none"
         withVisualDebug
       >
         {isTruncated ? (
@@ -179,7 +179,7 @@ type: example
   display="block"
   width="30rem"
   margin="general.spaceMd"
-  padding="small none"
+  padding="general.spaceMd none"
   withVisualDebug
 >
   <Button
@@ -273,7 +273,7 @@ type: example
               <RadioInput label="secondary" value="secondary" />
             </RadioInputGroup>
           </View>
-          <Flex margin="none none general.spaceXl" gap="medium">
+          <Flex margin="none none general.spaceXl" gap="general.spaceXl">
             <Flex.Item>
               <Button withBackground={this.state.withBackground}
                       color={this.state.color}

packages/ui-buttons/src/CloseButton/v2/README.md

@@ -22,11 +22,11 @@ If you need the `CloseButton` to work in a layout with other elements vs. absolu
 type: example
 ---
 <View display="block" position="relative" background="primary" shadow="resting">
-  <Flex height="6rem" justifyItems="space-between" alignItems="center" padding="medium">
+  <Flex height="6rem" justifyItems="space-between" alignItems="center" padding="general.spaceXl">
     <Flex.Item shouldShrink shouldGrow>
       <Heading level="h2">Some Heading Text</Heading>
     </Flex.Item>
-    <Flex.Item padding="none none none medium">
+    <Flex.Item padding="none none none general.spaceXl">
       <CloseButton size="medium" screenReaderLabel="Close" />
     </Flex.Item>
   </Flex>

packages/ui-buttons/src/CondensedButton/v2/README.md

@@ -8,7 +8,7 @@ CondensedButton is a button component that renders without padding. It is meant
 ---
 type: example
 ---
-<View display="block" background="primary" padding="small">
+<View display="block" background="primary" padding="general.spaceMd">
   <CondensedButton>Click Me</CondensedButton>
 </View>
 ```

packages/ui-buttons/src/ToggleButton/v2/README.md

@@ -17,7 +17,7 @@ type: example
     }
 
     return (
-      <View as="div" padding="x-large" id="toggleContainer">
+      <View as="div" padding="general.space2xl" id="toggleContainer">
         <ToggleButton
           status={locked ? 'pressed' : 'unpressed'}
           color={locked ? 'danger' : 'secondary'}
@@ -49,7 +49,7 @@ type: example
     return (
       <View
         as="div"
-        padding="xx-large"
+        padding="general.space2xl"
         background="info"
         id="inverseToggleContainer"
       >

packages/ui-byline/src/Byline/v2/README.md

@@ -54,6 +54,6 @@ type: example
       </Text>
     </View>
   }>
-  <HeartInstUIIcon size="medium" color="successColor" />
+  <HeartInstUIIcon size="md" color="successColor" />
 </Byline>
 ```

packages/ui-checkbox/src/Checkbox/v2/README.md

@@ -75,7 +75,7 @@ type: example
           checked={value.length === 3}
           indeterminate={value.length > 0 && value.length < 3}
         />
-        <View as="div" padding="0 0 0 medium">
+        <View as="div" padding="0 0 0 general.spaceXl">
           <Checkbox
             aria-labelledby="groupLabel eng203Label"
             label={<span id="eng203Label">English 203</span>}
@@ -87,7 +87,7 @@ type: example
             checked={value.indexOf('eng203') !== -1}
           />
         </View>
-        <View as="div" padding="0 0 0 medium">
+        <View as="div" padding="0 0 0 general.spaceXl">
           <Checkbox
             aria-labelledby="groupLabel sci101Label"
             label={<span id="sci101Label">Science 101</span>}
@@ -99,7 +99,7 @@ type: example
             checked={value.indexOf('sci101') !== -1}
           />
         </View>
-        <View as="div" padding="0 0 0 medium">
+        <View as="div" padding="0 0 0 general.spaceXl">
           <Checkbox
             aria-labelledby="groupLabel hist101Label"
             label={<span id="hist101Label">History 111</span>}