From c73dea64315002584945a7da05374e941685583e Mon Sep 17 00:00:00 2001
From: acarreras <acarreras@pinterest.com>
Date: Fri, 25 Oct 2024 01:44:21 +0200
Subject: [PATCH 1/2] more

---
 .../DatePicker.jsdom.test.tsx.snap            |  8 +-
 .../ExpandableItem.test.tsx.snap              | 18 ++---
 .../__snapshots__/Controls.test.tsx.snap      | 20 ++---
 .../__snapshots__/Playhead.test.tsx.snap      |  4 +-
 .../src/__snapshots__/Accordion.test.tsx.snap | 14 ++--
 .../AccordionExpandable.test.tsx.snap         | 32 ++++----
 .../ActivationCard.test.tsx.snap              | 14 ++--
 .../__snapshots__/BannerCallout.test.tsx.snap | 18 ++---
 .../__snapshots__/BannerOverlay.test.tsx.snap | 32 ++++----
 .../__snapshots__/BannerSlim.test.tsx.snap    | 12 +--
 .../__snapshots__/BannerUpsell.test.tsx.snap  | 16 ++--
 .../src/__snapshots__/Box.test.tsx.snap       |  4 +-
 .../ComboBox.jsdom.test.tsx.snap              | 18 ++---
 .../Dropdown.jsdom.test.tsx.snap              | 72 ++++++++---------
 .../__snapshots__/SelectList.test.tsx.snap    |  6 +-
 .../SheetMobile.jsdom.test.tsx.snap           |  8 +-
 .../SideNavigation.test.tsx.snap              | 76 +++++++++---------
 .../src/__snapshots__/Table.test.tsx.snap     |  2 +-
 .../TableOfContents.test.tsx.snap             | 14 ++--
 .../TableRowDrawer.test.tsx.snap              |  2 +-
 .../src/__snapshots__/Tabs.test.tsx.snap      | 24 +++---
 .../src/__snapshots__/Tag.test.tsx.snap       | 10 +--
 .../src/__snapshots__/TagData.test.tsx.snap   | 80 +++++++++----------
 .../src/__snapshots__/TextArea.test.tsx.snap  |  6 +-
 .../src/__snapshots__/TextField.test.tsx.snap |  6 +-
 .../src/__snapshots__/TileData.test.tsx.snap  | 38 ++++-----
 .../src/__snapshots__/Toast.test.tsx.snap     | 14 ++--
 .../src/__snapshots__/Video.test.tsx.snap     |  6 +-
 packages/gestalt/src/boxTransforms.ts         |  2 +-
 packages/gestalt/src/transforms.ts            |  4 +-
 30 files changed, 290 insertions(+), 290 deletions(-)

diff --git a/packages/gestalt-datepicker/src/__snapshots__/DatePicker.jsdom.test.tsx.snap b/packages/gestalt-datepicker/src/__snapshots__/DatePicker.jsdom.test.tsx.snap
index 754c487557..760eaa9c80 100644
--- a/packages/gestalt-datepicker/src/__snapshots__/DatePicker.jsdom.test.tsx.snap
+++ b/packages/gestalt-datepicker/src/__snapshots__/DatePicker.jsdom.test.tsx.snap
@@ -29,10 +29,10 @@ exports[`DatePicker Mobile Datepicker renders 1`] = `
           class="react-datepicker__input-container"
         >
           <div
-            class="Jea KS5 XiG ujU zI7 iyn Hsu "
+            class="Jea KS5 XiG ujU xcv L4E zI7 iyn Hsu"
           >
             <div
-              class="ujU zI7 iyn Hsu "
+              class="ujU xcv L4E zI7 iyn Hsu"
             >
               <span>
                 <div
@@ -142,12 +142,12 @@ exports[`DatePicker Mobile Datepicker renders 1`] = `
                   <div
                     aria-disabled="false"
                     aria-label="Grabber"
-                    class="S9z iyn e8F BG7"
+                    class="S9z v_3 iyn e8F BG7"
                     role="button"
                     tabindex="0"
                   >
                     <div
-                      class="haa zI7 iyn Hsu "
+                      class="haa v_3 zI7 iyn Hsu"
                       style="height: 5px; width: 37px;"
                     />
                   </div>
diff --git a/packages/gestalt/src/Accordion/__snapshots__/ExpandableItem.test.tsx.snap b/packages/gestalt/src/Accordion/__snapshots__/ExpandableItem.test.tsx.snap
index 16d7ecc09c..2dbd6e41ab 100644
--- a/packages/gestalt/src/Accordion/__snapshots__/ExpandableItem.test.tsx.snap
+++ b/packages/gestalt/src/Accordion/__snapshots__/ExpandableItem.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`AccordionExpandableItem renders correctly 1`] = `
             className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol1200"
+              className="box xsCol12"
             >
               <div
                 className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
@@ -113,7 +113,7 @@ exports[`AccordionExpandableItem renders correctly with badge 1`] = `
             className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol1200"
+              className="box xsCol12"
             >
               <div
                 className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
@@ -227,7 +227,7 @@ exports[`AccordionExpandableItem renders correctly with children 1`] = `
             className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol1200"
+              className="box xsCol12"
             >
               <div
                 className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
@@ -301,7 +301,7 @@ exports[`AccordionExpandableItem renders correctly with error 1`] = `
             className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol1200"
+              className="box xsCol12"
             >
               <div
                 className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
@@ -397,7 +397,7 @@ exports[`AccordionExpandableItem renders correctly with icon 1`] = `
             className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol1200"
+              className="box xsCol12"
             >
               <div
                 className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
@@ -493,7 +493,7 @@ exports[`AccordionExpandableItem renders correctly with icon button 1`] = `
             className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol1200"
+              className="box xsCol12"
             >
               <div
                 className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
@@ -621,7 +621,7 @@ exports[`AccordionExpandableItem renders correctly with summary 1`] = `
             className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol600"
+              className="box xsCol6"
             >
               <div
                 className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
@@ -649,7 +649,7 @@ exports[`AccordionExpandableItem renders correctly with summary 1`] = `
               </div>
             </div>
             <div
-              className="box marginStart600 xsCol600"
+              className="box marginStart600 xsCol6"
             >
               <div
                 className="Flex rowGap0 columnGap200 xsDirectionColumn"
@@ -748,7 +748,7 @@ exports[`AccordionExpandableItem renders correctly with when expanded 1`] = `
             className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
           >
             <div
-              className="box xsCol1200"
+              className="box xsCol12"
             >
               <div
                 className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
diff --git a/packages/gestalt/src/Video/__snapshots__/Controls.test.tsx.snap b/packages/gestalt/src/Video/__snapshots__/Controls.test.tsx.snap
index 2e7b26aa9f..f42f1ca07f 100644
--- a/packages/gestalt/src/Video/__snapshots__/Controls.test.tsx.snap
+++ b/packages/gestalt/src/Video/__snapshots__/Controls.test.tsx.snap
@@ -85,7 +85,7 @@ exports[`VideoControls for double digit minutes 1`] = `
         tabIndex="-1"
       >
         <div
-          className="absolute box left0 right0 rounding200 secondary xsDisplayFlex"
+          className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
           style={
             Object {
               "height": 4,
@@ -93,7 +93,7 @@ exports[`VideoControls for double digit minutes 1`] = `
           }
         >
           <div
-            className="box light rounding200"
+            className="box light rounding2"
             style={
               Object {
                 "height": "100%",
@@ -254,7 +254,7 @@ exports[`VideoControls for double digit seconds 1`] = `
         tabIndex="-1"
       >
         <div
-          className="absolute box left0 right0 rounding200 secondary xsDisplayFlex"
+          className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
           style={
             Object {
               "height": 4,
@@ -262,7 +262,7 @@ exports[`VideoControls for double digit seconds 1`] = `
           }
         >
           <div
-            className="box light rounding200"
+            className="box light rounding2"
             style={
               Object {
                 "height": "100%",
@@ -423,7 +423,7 @@ exports[`VideoControls for single digit minutes 1`] = `
         tabIndex="-1"
       >
         <div
-          className="absolute box left0 right0 rounding200 secondary xsDisplayFlex"
+          className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
           style={
             Object {
               "height": 4,
@@ -431,7 +431,7 @@ exports[`VideoControls for single digit minutes 1`] = `
           }
         >
           <div
-            className="box light rounding200"
+            className="box light rounding2"
             style={
               Object {
                 "height": "100%",
@@ -592,7 +592,7 @@ exports[`VideoControls for single digit seconds 1`] = `
         tabIndex="-1"
       >
         <div
-          className="absolute box left0 right0 rounding200 secondary xsDisplayFlex"
+          className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
           style={
             Object {
               "height": 4,
@@ -600,7 +600,7 @@ exports[`VideoControls for single digit seconds 1`] = `
           }
         >
           <div
-            className="box light rounding200"
+            className="box light rounding2"
             style={
               Object {
                 "height": "100%",
@@ -761,7 +761,7 @@ exports[`VideoControls rounds for partial seconds 1`] = `
         tabIndex="-1"
       >
         <div
-          className="absolute box left0 right0 rounding200 secondary xsDisplayFlex"
+          className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
           style={
             Object {
               "height": 4,
@@ -769,7 +769,7 @@ exports[`VideoControls rounds for partial seconds 1`] = `
           }
         >
           <div
-            className="box light rounding200"
+            className="box light rounding2"
             style={
               Object {
                 "height": "100%",
diff --git a/packages/gestalt/src/Video/__snapshots__/Playhead.test.tsx.snap b/packages/gestalt/src/Video/__snapshots__/Playhead.test.tsx.snap
index 0be38ef3fd..8463c94e18 100644
--- a/packages/gestalt/src/Video/__snapshots__/Playhead.test.tsx.snap
+++ b/packages/gestalt/src/Video/__snapshots__/Playhead.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`VideoPlayhead 1`] = `
     tabIndex="-1"
   >
     <div
-      className="absolute box left0 right0 rounding200 secondary xsDisplayFlex"
+      className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
       style={
         Object {
           "height": 4,
@@ -36,7 +36,7 @@ exports[`VideoPlayhead 1`] = `
       }
     >
       <div
-        className="box light rounding200"
+        className="box light rounding2"
         style={
           Object {
             "height": "100%",
diff --git a/packages/gestalt/src/__snapshots__/Accordion.test.tsx.snap b/packages/gestalt/src/__snapshots__/Accordion.test.tsx.snap
index db8cf39778..2514c33cef 100644
--- a/packages/gestalt/src/__snapshots__/Accordion.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Accordion.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Accordion renders a badge correctly 1`] = `
 <div
-  className="box default paddingX600 paddingY600 rounding400 shadow"
+  className="box default paddingX600 paddingY600 rounding4 shadow"
   id="accordion-test"
 >
   <div
@@ -91,7 +91,7 @@ exports[`Accordion renders a badge correctly 1`] = `
 
 exports[`Accordion renders a title correctly 1`] = `
 <div
-  className="box default paddingX600 paddingY600 rounding400 shadow"
+  className="box default paddingX600 paddingY600 rounding4 shadow"
   id="accordion-test"
 >
   <div
@@ -134,7 +134,7 @@ exports[`Accordion renders a title correctly 1`] = `
 
 exports[`Accordion renders an error correctly 1`] = `
 <div
-  className="box default paddingX600 paddingY600 rounding400 shadow"
+  className="box default paddingX600 paddingY600 rounding4 shadow"
   id="accordion-test"
 >
   <div
@@ -205,7 +205,7 @@ exports[`Accordion renders an error correctly 1`] = `
 
 exports[`Accordion renders an icon button correctly 1`] = `
 <div
-  className="box default paddingX600 paddingY600 rounding400 shadow"
+  className="box default paddingX600 paddingY600 rounding4 shadow"
   id="accordion-test"
 >
   <div
@@ -308,7 +308,7 @@ exports[`Accordion renders an icon button correctly 1`] = `
 
 exports[`Accordion renders an icon correctly 1`] = `
 <div
-  className="box default paddingX600 paddingY600 rounding400 shadow"
+  className="box default paddingX600 paddingY600 rounding4 shadow"
   id="accordion-test"
 >
   <div
@@ -379,7 +379,7 @@ exports[`Accordion renders an icon correctly 1`] = `
 
 exports[`Accordion renders content correctly 1`] = `
 <div
-  className="box default paddingX600 paddingY600 rounding400 shadow"
+  className="box default paddingX600 paddingY600 rounding4 shadow"
   id="accordion-test"
 >
   <div
@@ -400,7 +400,7 @@ exports[`Accordion renders content correctly 1`] = `
 
 exports[`Accordion renders the base correctly 1`] = `
 <div
-  className="box default paddingX600 paddingY600 rounding400 shadow"
+  className="box default paddingX600 paddingY600 rounding4 shadow"
   id="accordion-test"
 >
   <div
diff --git a/packages/gestalt/src/__snapshots__/AccordionExpandable.test.tsx.snap b/packages/gestalt/src/__snapshots__/AccordionExpandable.test.tsx.snap
index f1ae93d175..addead2fcb 100644
--- a/packages/gestalt/src/__snapshots__/AccordionExpandable.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/AccordionExpandable.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Module Expandable renders correctly with multiple items 1`] = `
 <div
-  className="box default rounding400 shadow"
+  className="box default rounding4 shadow"
 >
   <div
     className="box paddingX600 paddingY600"
@@ -42,7 +42,7 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
               className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
             >
               <div
-                className="box xsCol600"
+                className="box xsCol6"
               >
                 <div
                   className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
@@ -70,7 +70,7 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
                 </div>
               </div>
               <div
-                className="box marginStart600 xsCol600"
+                className="box marginStart600 xsCol6"
               >
                 <div
                   className="Flex rowGap0 columnGap200 xsDirectionColumn"
@@ -162,7 +162,7 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
               className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
             >
               <div
-                className="box xsCol600"
+                className="box xsCol6"
               >
                 <div
                   className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
@@ -190,7 +190,7 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
                 </div>
               </div>
               <div
-                className="box marginStart600 xsCol600"
+                className="box marginStart600 xsCol6"
               >
                 <div
                   className="Flex rowGap0 columnGap200 xsDirectionColumn"
@@ -282,7 +282,7 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
               className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
             >
               <div
-                className="box xsCol600"
+                className="box xsCol6"
               >
                 <div
                   className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
@@ -332,7 +332,7 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
                 </div>
               </div>
               <div
-                className="box marginStart600 xsCol600"
+                className="box marginStart600 xsCol6"
               >
                 <div
                   className="Flex rowGap0 columnGap200 xsDirectionColumn"
@@ -388,7 +388,7 @@ exports[`Module Expandable renders correctly with multiple items 1`] = `
 
 exports[`Module Expandable renders correctly with one item 1`] = `
 <div
-  className="box default rounding400 shadow"
+  className="box default rounding4 shadow"
 >
   <div
     className="box paddingX600 paddingY600"
@@ -428,7 +428,7 @@ exports[`Module Expandable renders correctly with one item 1`] = `
               className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
             >
               <div
-                className="box xsCol600"
+                className="box xsCol6"
               >
                 <div
                   className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
@@ -456,7 +456,7 @@ exports[`Module Expandable renders correctly with one item 1`] = `
                 </div>
               </div>
               <div
-                className="box marginStart600 xsCol600"
+                className="box marginStart600 xsCol6"
               >
                 <div
                   className="Flex rowGap0 columnGap200 xsDirectionColumn"
@@ -542,7 +542,7 @@ exports[`Module Expandable renders correctly with one item 1`] = `
 
 exports[`renders correctly with multiple items with expandedId 1`] = `
 <div
-  className="box default rounding400 shadow"
+  className="box default rounding4 shadow"
 >
   <div
     className="box paddingX600 paddingY600"
@@ -582,7 +582,7 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
               className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
             >
               <div
-                className="box xsCol1200"
+                className="box xsCol12"
               >
                 <div
                   className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
@@ -684,7 +684,7 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
               className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
             >
               <div
-                className="box xsCol600"
+                className="box xsCol6"
               >
                 <div
                   className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
@@ -712,7 +712,7 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
                 </div>
               </div>
               <div
-                className="box marginStart600 xsCol600"
+                className="box marginStart600 xsCol6"
               >
                 <div
                   className="Flex rowGap0 columnGap200 xsDirectionColumn"
@@ -804,7 +804,7 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
               className="box flexGrow marginEnd600 xsDisplayFlex xsItemsBaseline"
             >
               <div
-                className="box xsCol600"
+                className="box xsCol6"
               >
                 <div
                   className="Flex rowGap300 columnGap0 xsDirectionRow xsItemsCenter"
@@ -854,7 +854,7 @@ exports[`renders correctly with multiple items with expandedId 1`] = `
                 </div>
               </div>
               <div
-                className="box marginStart600 xsCol600"
+                className="box marginStart600 xsCol6"
               >
                 <div
                   className="Flex rowGap0 columnGap200 xsDirectionColumn"
diff --git a/packages/gestalt/src/__snapshots__/ActivationCard.test.tsx.snap b/packages/gestalt/src/__snapshots__/ActivationCard.test.tsx.snap
index e8315ba342..e442cdd745 100644
--- a/packages/gestalt/src/__snapshots__/ActivationCard.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/ActivationCard.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ActivationCard /> Needs attention ActivationCard 1`] = `
 <div
-  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding400 shadow xsDirectionColumn xsDisplayFlex"
+  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding4 shadow xsDirectionColumn xsDisplayFlex"
   style={
     Object {
       "height": "100%",
@@ -69,7 +69,7 @@ exports[`<ActivationCard /> Needs attention ActivationCard 1`] = `
 
 exports[`<ActivationCard /> Not started ActivationCard 1`] = `
 <div
-  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding400 shadow xsDirectionColumn xsDisplayFlex"
+  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding4 shadow xsDirectionColumn xsDisplayFlex"
   style={
     Object {
       "height": "100%",
@@ -119,7 +119,7 @@ exports[`<ActivationCard /> Not started ActivationCard 1`] = `
 
 exports[`<ActivationCard /> Pending ActivationCard 1`] = `
 <div
-  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding400 shadow xsDirectionColumn xsDisplayFlex"
+  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding4 shadow xsDirectionColumn xsDisplayFlex"
   style={
     Object {
       "height": "100%",
@@ -186,7 +186,7 @@ exports[`<ActivationCard /> Pending ActivationCard 1`] = `
 
 exports[`<ActivationCard /> complete ActivationCard 1`] = `
 <div
-  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding400 shadow xsDirectionColumn xsDisplayFlex"
+  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding4 shadow xsDirectionColumn xsDisplayFlex"
   style={
     Object {
       "height": "100%",
@@ -247,7 +247,7 @@ exports[`<ActivationCard /> complete ActivationCard 1`] = `
 
 exports[`<ActivationCard /> message + title + link + dismissButton 1`] = `
 <div
-  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding400 shadow xsDirectionColumn xsDisplayFlex"
+  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding4 shadow xsDirectionColumn xsDisplayFlex"
   style={
     Object {
       "height": "100%",
@@ -405,7 +405,7 @@ exports[`<ActivationCard /> message + title + link + dismissButton 1`] = `
 
 exports[`<ActivationCard /> message + title + link 1`] = `
 <div
-  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding400 shadow xsDirectionColumn xsDisplayFlex"
+  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding4 shadow xsDirectionColumn xsDisplayFlex"
   style={
     Object {
       "height": "100%",
@@ -514,7 +514,7 @@ exports[`<ActivationCard /> message + title + link 1`] = `
 
 exports[`<ActivationCard /> message + title 1`] = `
 <div
-  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding400 shadow xsDirectionColumn xsDisplayFlex"
+  className="box default flexGrow justifyCenter paddingX600 paddingY600 relative rounding4 shadow xsDirectionColumn xsDisplayFlex"
   style={
     Object {
       "height": "100%",
diff --git a/packages/gestalt/src/__snapshots__/BannerCallout.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerCallout.test.tsx.snap
index 0dc63ed9ed..85e1237288 100644
--- a/packages/gestalt/src/__snapshots__/BannerCallout.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/BannerCallout.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<BannerCallout /> Error BannerCallout 1`] = `
 <div
-  className="box errorWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box errorWeak paddingX600 paddingY600 relative rounding4 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
@@ -57,7 +57,7 @@ exports[`<BannerCallout /> Error BannerCallout 1`] = `
 
 exports[`<BannerCallout /> Info BannerCallout 1`] = `
 <div
-  className="box infoWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box infoWeak paddingX600 paddingY600 relative rounding4 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
@@ -112,7 +112,7 @@ exports[`<BannerCallout /> Info BannerCallout 1`] = `
 
 exports[`<BannerCallout /> Warning BannerCallout 1`] = `
 <div
-  className="box paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 warningWeak xsDirectionColumn xsDisplayFlex"
+  className="box paddingX600 paddingY600 relative rounding4 smDirectionRow smPaddingX800 smPaddingY800 warningWeak xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
@@ -167,7 +167,7 @@ exports[`<BannerCallout /> Warning BannerCallout 1`] = `
 
 exports[`<BannerCallout /> bannercallout with rich text message 1`] = `
 <div
-  className="box infoWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box infoWeak paddingX600 paddingY600 relative rounding4 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
@@ -350,7 +350,7 @@ exports[`<BannerCallout /> bannercallout with rich text message 1`] = `
 
 exports[`<BannerCallout /> message + title + primaryAction + dismissButton 1`] = `
 <div
-  className="box infoWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box infoWeak paddingX600 paddingY600 relative rounding4 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
@@ -505,7 +505,7 @@ exports[`<BannerCallout /> message + title + primaryAction + dismissButton 1`] =
 
 exports[`<BannerCallout /> message + title + primaryAction + secondaryAction 1`] = `
 <div
-  className="box infoWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box infoWeak paddingX600 paddingY600 relative rounding4 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
@@ -649,7 +649,7 @@ exports[`<BannerCallout /> message + title + primaryAction + secondaryAction 1`]
 
 exports[`<BannerCallout /> message + title + primaryAction with href 1`] = `
 <div
-  className="box infoWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box infoWeak paddingX600 paddingY600 relative rounding4 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
@@ -755,7 +755,7 @@ exports[`<BannerCallout /> message + title + primaryAction with href 1`] = `
 
 exports[`<BannerCallout /> message + title + primaryAction without href 1`] = `
 <div
-  className="box infoWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box infoWeak paddingX600 paddingY600 relative rounding4 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
@@ -852,7 +852,7 @@ exports[`<BannerCallout /> message + title + primaryAction without href 1`] = `
 
 exports[`<BannerCallout /> message + title 1`] = `
 <div
-  className="box infoWeak paddingX600 paddingY600 relative rounding400 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box infoWeak paddingX600 paddingY600 relative rounding4 smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
diff --git a/packages/gestalt/src/__snapshots__/BannerOverlay.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerOverlay.test.tsx.snap
index 9dbeedbea8..df08280ab9 100644
--- a/packages/gestalt/src/__snapshots__/BannerOverlay.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/BannerOverlay.test.tsx.snap
@@ -6,7 +6,7 @@ Array [
     className="box smDisplayFlex xsDisplayNone"
   >
     <div
-      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
+      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding4 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -30,7 +30,7 @@ Array [
             className="box"
           >
             <div
-              className="Mask rounding200 willChangeTransform"
+              className="Mask rounding2 willChangeTransform"
               style={
                 Object {
                   "height": 32,
@@ -118,7 +118,7 @@ Array [
     className="box smDisplayNone xsDisplayFlex"
   >
     <div
-      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
+      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding4 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -142,7 +142,7 @@ Array [
             className="box"
           >
             <div
-              className="Mask rounding200 willChangeTransform"
+              className="Mask rounding2 willChangeTransform"
               style={
                 Object {
                   "height": 32,
@@ -239,7 +239,7 @@ Array [
     className="box smDisplayFlex xsDisplayNone"
   >
     <div
-      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
+      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding4 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -263,7 +263,7 @@ Array [
             className="box"
           >
             <div
-              className="Mask rounding200 willChangeTransform"
+              className="Mask rounding2 willChangeTransform"
               style={
                 Object {
                   "height": 32,
@@ -351,7 +351,7 @@ Array [
     className="box smDisplayNone xsDisplayFlex"
   >
     <div
-      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
+      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding4 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -375,7 +375,7 @@ Array [
             className="box"
           >
             <div
-              className="Mask rounding200 willChangeTransform"
+              className="Mask rounding2 willChangeTransform"
               style={
                 Object {
                   "height": 32,
@@ -472,7 +472,7 @@ Array [
     className="box smDisplayFlex xsDisplayNone"
   >
     <div
-      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
+      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding4 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -529,7 +529,7 @@ Array [
     className="box smDisplayNone xsDisplayFlex"
   >
     <div
-      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
+      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding4 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -595,7 +595,7 @@ Array [
     className="box smDisplayFlex xsDisplayNone"
   >
     <div
-      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
+      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding4 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -652,7 +652,7 @@ Array [
     className="box smDisplayNone xsDisplayFlex"
   >
     <div
-      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
+      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding4 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -718,7 +718,7 @@ Array [
     className="box smDisplayFlex xsDisplayNone"
   >
     <div
-      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
+      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding4 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
       style={
         Object {
           "bottom": 10,
@@ -775,7 +775,7 @@ Array [
     className="box smDisplayNone xsDisplayFlex"
   >
     <div
-      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
+      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding4 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
       style={
         Object {
           "bottom": 10,
@@ -841,7 +841,7 @@ Array [
     className="box smDisplayFlex xsDisplayNone"
   >
     <div
-      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
+      className="box contentCenter default fit fixed justifyBetween paddingX400 paddingY300 rounding4 shadow smPaddingY400 xsDirectionRow xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
@@ -898,7 +898,7 @@ Array [
     className="box smDisplayNone xsDisplayFlex"
   >
     <div
-      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding400 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
+      className="box default fit fixed justifyCenter paddingX400 paddingY300 rounding4 shadow smPaddingY400 xsDirectionColumn xsDisplayFlex"
       style={
         Object {
           "bottom": "unset",
diff --git a/packages/gestalt/src/__snapshots__/BannerSlim.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerSlim.test.tsx.snap
index 6cc562d99e..fb3ee96438 100644
--- a/packages/gestalt/src/__snapshots__/BannerSlim.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/BannerSlim.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`BannerSlim renders an icon with accessibility label 1`] = `
 <div
-  className="box errorWeak mdDirectionRow paddingX400 paddingY0 paddingY400 rounding400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box errorWeak mdDirectionRow paddingX400 paddingY0 paddingY400 rounding4 xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -58,7 +58,7 @@ exports[`BannerSlim renders an icon with accessibility label 1`] = `
 
 exports[`BannerSlim renders complex message 1`] = `
 <div
-  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding400 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding4 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -119,7 +119,7 @@ exports[`BannerSlim renders complex message 1`] = `
 
 exports[`BannerSlim renders neutral type with message 1`] = `
 <div
-  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding400 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding4 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -153,7 +153,7 @@ exports[`BannerSlim renders neutral type with message 1`] = `
 
 exports[`BannerSlim renders non-neutral compact with accessibility label 1`] = `
 <div
-  className="box mdDirectionRow paddingX0 paddingY0 paddingY100 rounding400 transparent xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX0 paddingY0 paddingY100 rounding4 transparent xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -209,7 +209,7 @@ exports[`BannerSlim renders non-neutral compact with accessibility label 1`] = `
 
 exports[`BannerSlim renders primary action and dismiss button 1`] = `
 <div
-  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding400 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding4 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
@@ -362,7 +362,7 @@ exports[`BannerSlim renders primary action and dismiss button 1`] = `
 
 exports[`BannerSlim renders simple message with helper link 1`] = `
 <div
-  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding400 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
+  className="box mdDirectionRow paddingX400 paddingY0 paddingY400 rounding4 secondary xsDirectionColumn xsDisplayFlex xsItemsCenter"
   style={
     Object {
       "width": "100%",
diff --git a/packages/gestalt/src/__snapshots__/BannerUpsell.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerUpsell.test.tsx.snap
index 3ce96957b4..6bf795bcec 100644
--- a/packages/gestalt/src/__snapshots__/BannerUpsell.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/BannerUpsell.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<BannerUpsell /> Basic BannerUpsell 1`] = `
 <div
-  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding4 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
@@ -40,7 +40,7 @@ exports[`<BannerUpsell /> Basic BannerUpsell 1`] = `
 
 exports[`<BannerUpsell /> message + title + dismissButton + image + form 1`] = `
 <div
-  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding4 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
@@ -251,7 +251,7 @@ exports[`<BannerUpsell /> message + title + dismissButton + image + form 1`] = `
 
 exports[`<BannerUpsell /> message + title + primaryAction + dismissButton + image 1`] = `
 <div
-  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding4 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
@@ -421,7 +421,7 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton + imag
 
 exports[`<BannerUpsell /> message + title + primaryAction + dismissButton 1`] = `
 <div
-  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding4 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
@@ -559,7 +559,7 @@ exports[`<BannerUpsell /> message + title + primaryAction + dismissButton 1`] =
 
 exports[`<BannerUpsell /> message + title + primaryAction + secondaryAction 1`] = `
 <div
-  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding4 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
@@ -686,7 +686,7 @@ exports[`<BannerUpsell /> message + title + primaryAction + secondaryAction 1`]
 
 exports[`<BannerUpsell /> message + title + primaryAction with href 1`] = `
 <div
-  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding4 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
@@ -775,7 +775,7 @@ exports[`<BannerUpsell /> message + title + primaryAction with href 1`] = `
 
 exports[`<BannerUpsell /> message + title + primaryAction without href 1`] = `
 <div
-  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding4 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
@@ -855,7 +855,7 @@ exports[`<BannerUpsell /> message + title + primaryAction without href 1`] = `
 
 exports[`<BannerUpsell /> message + title 1`] = `
 <div
-  className="box default paddingX1200 paddingY600 relative rounding400 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
+  className="box default paddingX1200 paddingY600 relative rounding4 shadow smDirectionRow smPaddingX800 smPaddingY800 xsDirectionColumn xsDisplayFlex"
 >
   <div
     className="box flexWrap smDisplayFlex smMarginBottomN300 smMarginTopN300"
diff --git a/packages/gestalt/src/__snapshots__/Box.test.tsx.snap b/packages/gestalt/src/__snapshots__/Box.test.tsx.snap
index c605d4a5e9..d601bd8ef9 100644
--- a/packages/gestalt/src/__snapshots__/Box.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Box.test.tsx.snap
@@ -55,13 +55,13 @@ exports[`Box has correct class when opacity is 0.5 1`] = `
 
 exports[`Box has correct class when opacity is 1 1`] = `
 <div
-  className="box opacity100"
+  className="box opacity1"
 />
 `;
 
 exports[`Box has correct class when rounding is 1 1`] = `
 <div
-  className="box rounding100"
+  className="box rounding1"
 />
 `;
 
diff --git a/packages/gestalt/src/__snapshots__/ComboBox.jsdom.test.tsx.snap b/packages/gestalt/src/__snapshots__/ComboBox.jsdom.test.tsx.snap
index 14e8073cce..eb815cec97 100644
--- a/packages/gestalt/src/__snapshots__/ComboBox.jsdom.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/ComboBox.jsdom.test.tsx.snap
@@ -118,7 +118,7 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
             >
               <div
                 aria-disabled="false"
-                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding1 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
@@ -166,7 +166,7 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
             >
               <div
                 aria-disabled="false"
-                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding1 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
@@ -214,7 +214,7 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
             >
               <div
                 aria-disabled="false"
-                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding1 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
@@ -262,7 +262,7 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
             >
               <div
                 aria-disabled="false"
-                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding1 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
@@ -310,7 +310,7 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
             >
               <div
                 aria-disabled="false"
-                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding1 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
@@ -358,7 +358,7 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
             >
               <div
                 aria-disabled="false"
-                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding1 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
@@ -406,7 +406,7 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
             >
               <div
                 aria-disabled="false"
-                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding1 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
@@ -454,7 +454,7 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
             >
               <div
                 aria-disabled="false"
-                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding1 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
@@ -502,7 +502,7 @@ exports[`ComboBox Controlled ComboBox with Tags renders with tags 1`] = `
             >
               <div
                 aria-disabled="false"
-                class="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
+                class="box paddingX100 paddingYNaN relative rounding1 secondary xsDisplayInlineBlock"
                 style="height: 24px; max-width: 300px;"
               >
                 <div
diff --git a/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap b/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap
index 489d9bd0d9..400566e8d6 100644
--- a/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Dropdown.jsdom.test.tsx.snap
@@ -35,14 +35,14 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
             class="box flexGrow marginBottom200 marginEnd200 marginStart200 marginTop200 xsDirectionColumn xsDisplayFlex xsItemsCenter"
           >
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-0"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 secondary xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 secondary xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
@@ -77,14 +77,14 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-1"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
@@ -119,14 +119,14 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-2"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
@@ -161,14 +161,14 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-3"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
@@ -203,14 +203,14 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-4"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
@@ -245,14 +245,14 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-5"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
@@ -287,14 +287,14 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-6"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
@@ -329,14 +329,14 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-7"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
@@ -371,14 +371,14 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-8"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
@@ -413,14 +413,14 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-9"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
@@ -455,14 +455,14 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-10"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
@@ -497,14 +497,14 @@ exports[`Dropdown renders a menu of 3 items conditionally 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-11"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
@@ -590,14 +590,14 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
             class="box flexGrow marginBottom200 marginEnd200 marginStart200 marginTop200 xsDirectionColumn xsDisplayFlex xsItemsCenter"
           >
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-0"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 secondary xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 secondary xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
@@ -632,14 +632,14 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-1"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
@@ -674,14 +674,14 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-2"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <a
                   class="noOutline inheritColor rounding0 block tapTransition noUnderline outlineFocus"
@@ -742,14 +742,14 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-3"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <div
                   class="Flex rowGap0 columnGap0 xsDirectionRow"
@@ -815,14 +815,14 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-4"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <a
                   class="noOutline inheritColor rounding0 block tapTransition noUnderline outlineFocus"
@@ -914,14 +914,14 @@ exports[`Dropdown renders a menu of 6 items 1`] = `
               </div>
             </div>
             <div
-              class="rounding200 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
+              class="rounding2 accessibilityOutline accessibilityOutlineFocusWithin fullWidth pointer"
               id="ex-1-item-5"
               role="menuitem"
               rounding="2"
               tabindex="-1"
             >
               <div
-                class="box paddingX200 paddingY200 rounding200 transparent xsDirectionColumn xsDisplayFlex"
+                class="box paddingX200 paddingY200 rounding2 transparent xsDirectionColumn xsDisplayFlex"
               >
                 <a
                   class="noOutline inheritColor rounding0 block tapTransition noUnderline outlineFocus"
diff --git a/packages/gestalt/src/__snapshots__/SelectList.test.tsx.snap b/packages/gestalt/src/__snapshots__/SelectList.test.tsx.snap
index 7deb727f0a..1a771f5b73 100644
--- a/packages/gestalt/src/__snapshots__/SelectList.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/SelectList.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`SelectList renders an option group 1`] = `
     </div>
   </label>
   <div
-    className="box relative rounding400 xsDisplayFlex"
+    className="box relative rounding4 xsDisplayFlex"
     style={
       Object {
         "backgroundColor": "var(--color-background-formfield-primary)",
@@ -112,7 +112,7 @@ exports[`SelectList renders with a hidden label 1`] = `
     </div>
   </label>
   <div
-    className="box relative rounding400 xsDisplayFlex"
+    className="box relative rounding4 xsDisplayFlex"
     style={
       Object {
         "backgroundColor": "var(--color-background-formfield-primary)",
@@ -177,7 +177,7 @@ exports[`SelectList renders with typical props 1`] = `
   className="box"
 >
   <div
-    className="box relative rounding400 xsDisplayFlex"
+    className="box relative rounding4 xsDisplayFlex"
     style={
       Object {
         "backgroundColor": "var(--color-background-formfield-primary)",
diff --git a/packages/gestalt/src/__snapshots__/SheetMobile.jsdom.test.tsx.snap b/packages/gestalt/src/__snapshots__/SheetMobile.jsdom.test.tsx.snap
index 1da857b45d..7311ad2adc 100644
--- a/packages/gestalt/src/__snapshots__/SheetMobile.jsdom.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/SheetMobile.jsdom.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`SheetMobile renders correctly auto size 1`] = `
               <div
                 aria-disabled={false}
                 aria-label="Grabber"
-                className="tapTransition rounding700 accessibilityOutline pointer"
+                className="tapTransition rounding7 accessibilityOutline pointer"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -62,7 +62,7 @@ exports[`SheetMobile renders correctly auto size 1`] = `
                 tabIndex={0}
               >
                 <div
-                  className="box rounding700 secondary"
+                  className="box rounding7 secondary"
                   style={
                     Object {
                       "height": 5,
@@ -205,7 +205,7 @@ exports[`SheetMobile renders correctly default size 1`] = `
               <div
                 aria-disabled={false}
                 aria-label="Grabber"
-                className="tapTransition rounding700 accessibilityOutline pointer"
+                className="tapTransition rounding7 accessibilityOutline pointer"
                 onBlur={[Function]}
                 onClick={[Function]}
                 onFocus={[Function]}
@@ -223,7 +223,7 @@ exports[`SheetMobile renders correctly default size 1`] = `
                 tabIndex={0}
               >
                 <div
-                  className="box rounding700 secondary"
+                  className="box rounding7 secondary"
                   style={
                     Object {
                       "height": 5,
diff --git a/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap b/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap
index 5e9fed7484..0574905645 100644
--- a/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/SideNavigation.test.tsx.snap
@@ -96,7 +96,7 @@ exports[`SideNavigation renders Header + Footer 1`] = `
                   className="liItem"
                 >
                   <a
-                    className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+                    className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
                     href="#"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -115,7 +115,7 @@ exports[`SideNavigation renders Header + Footer 1`] = `
                     tabIndex={0}
                   >
                     <div
-                      className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                      className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                       style={
                         Object {
                           "height": undefined,
@@ -276,7 +276,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                       className="liItem"
                     >
                       <a
-                        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+                        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
                         href="#"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -295,7 +295,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -409,7 +409,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                       className="liItem"
                     >
                       <a
-                        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+                        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
                         href="#"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -428,7 +428,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -620,7 +620,7 @@ exports[`SideNavigation renders Sections 1`] = `
                       className="liItem"
                     >
                       <a
-                        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+                        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
                         href="#"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -639,7 +639,7 @@ exports[`SideNavigation renders Sections 1`] = `
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -743,7 +743,7 @@ exports[`SideNavigation renders basic Item 1`] = `
                   className="liItem"
                 >
                   <a
-                    className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+                    className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
                     href="#"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -762,7 +762,7 @@ exports[`SideNavigation renders basic Item 1`] = `
                     tabIndex={0}
                   >
                     <div
-                      className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                      className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                       style={
                         Object {
                           "height": undefined,
@@ -864,7 +864,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                   className="liItem"
                 >
                   <a
-                    className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+                    className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
                     href="#"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -883,7 +883,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                     tabIndex={0}
                   >
                     <div
-                      className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                      className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                       style={
                         Object {
                           "height": undefined,
@@ -942,7 +942,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                   className="liItem"
                 >
                   <a
-                    className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+                    className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
                     href="#"
                     onBlur={[Function]}
                     onClick={[Function]}
@@ -961,7 +961,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                     tabIndex={0}
                   >
                     <div
-                      className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                      className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                       style={
                         Object {
                           "height": undefined,
@@ -1042,7 +1042,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                       className="liItem"
                     >
                       <a
-                        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+                        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
                         href="#"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -1061,7 +1061,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -1123,7 +1123,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                         aria-controls=":rd:"
                         aria-disabled={false}
                         aria-expanded={false}
-                        className="tapTransition rounding200 accessibilityOutline fullWidth pointer"
+                        className="tapTransition rounding2 accessibilityOutline fullWidth pointer"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -1141,7 +1141,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -1241,7 +1241,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                         aria-controls=":re:"
                         aria-disabled={false}
                         aria-expanded={false}
-                        className="tapTransition rounding200 accessibilityOutline fullWidth pointer"
+                        className="tapTransition rounding2 accessibilityOutline fullWidth pointer"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -1259,7 +1259,7 @@ exports[`SideNavigation renders expandable nested directory 1`] = `
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -1426,7 +1426,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                     aria-controls=":rm:"
                     aria-disabled={false}
                     aria-expanded={true}
-                    className="tapTransition rounding200 accessibilityOutline fullWidth pointer"
+                    className="tapTransition rounding2 accessibilityOutline fullWidth pointer"
                     onBlur={[Function]}
                     onClick={[Function]}
                     onFocus={[Function]}
@@ -1444,7 +1444,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                     tabIndex={0}
                   >
                     <div
-                      className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                      className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                       style={
                         Object {
                           "height": undefined,
@@ -1544,7 +1544,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                       className="liItem"
                     >
                       <a
-                        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+                        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
                         href="#"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -1563,7 +1563,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -1603,7 +1603,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                         aria-controls=":ro:"
                         aria-disabled={false}
                         aria-expanded={true}
-                        className="tapTransition rounding200 accessibilityOutline fullWidth pointer"
+                        className="tapTransition rounding2 accessibilityOutline fullWidth pointer"
                         onBlur={[Function]}
                         onClick={[Function]}
                         onFocus={[Function]}
@@ -1621,7 +1621,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -1699,7 +1699,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                           className="liItem"
                         >
                           <a
-                            className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+                            className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
                             href="#"
                             onBlur={[Function]}
                             onClick={[Function]}
@@ -1718,7 +1718,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                             tabIndex={0}
                           >
                             <div
-                              className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                              className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                               style={
                                 Object {
                                   "height": undefined,
@@ -1755,7 +1755,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                           className="liItem"
                         >
                           <a
-                            className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+                            className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
                             href="#"
                             onBlur={[Function]}
                             onClick={[Function]}
@@ -1774,7 +1774,7 @@ exports[`SideNavigation renders expanded group 1`] = `
                             tabIndex={0}
                           >
                             <div
-                              className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                              className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                               style={
                                 Object {
                                   "height": undefined,
@@ -1880,7 +1880,7 @@ exports[`SideNavigation renders static group 1`] = `
                   className="liItem"
                 >
                   <div
-                    className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                    className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                     style={
                       Object {
                         "height": undefined,
@@ -1941,7 +1941,7 @@ exports[`SideNavigation renders static group 1`] = `
                       className="liItem"
                     >
                       <a
-                        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+                        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
                         href="#"
                         onBlur={[Function]}
                         onClick={[Function]}
@@ -1960,7 +1960,7 @@ exports[`SideNavigation renders static group 1`] = `
                         tabIndex={0}
                       >
                         <div
-                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                          className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                           style={
                             Object {
                               "height": undefined,
@@ -1997,7 +1997,7 @@ exports[`SideNavigation renders static group 1`] = `
                       className="liItem"
                     >
                       <div
-                        className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                        className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                         style={
                           Object {
                             "height": undefined,
@@ -2036,7 +2036,7 @@ exports[`SideNavigation renders static group 1`] = `
                           className="liItem"
                         >
                           <a
-                            className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+                            className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
                             href="#"
                             onBlur={[Function]}
                             onClick={[Function]}
@@ -2055,7 +2055,7 @@ exports[`SideNavigation renders static group 1`] = `
                             tabIndex={0}
                           >
                             <div
-                              className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                              className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                               style={
                                 Object {
                                   "height": undefined,
@@ -2092,7 +2092,7 @@ exports[`SideNavigation renders static group 1`] = `
                           className="liItem"
                         >
                           <a
-                            className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+                            className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
                             href="#"
                             onBlur={[Function]}
                             onClick={[Function]}
@@ -2111,7 +2111,7 @@ exports[`SideNavigation renders static group 1`] = `
                             tabIndex={0}
                           >
                             <div
-                              className="box paddingXNaN paddingY200 paddingYNaN relative rounding200 xsDisplayFlex xsItemsCenter"
+                              className="box paddingXNaN paddingY200 paddingYNaN relative rounding2 xsDisplayFlex xsItemsCenter"
                               style={
                                 Object {
                                   "height": undefined,
diff --git a/packages/gestalt/src/__snapshots__/Table.test.tsx.snap b/packages/gestalt/src/__snapshots__/Table.test.tsx.snap
index 544712952b..530c6e60b5 100644
--- a/packages/gestalt/src/__snapshots__/Table.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Table.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`renders correctly 1`] = `
 
 exports[`renders correctly with border 1`] = `
 <div
-  className="borderColorLightGray box overflowAuto rounding100 sizeSm solid"
+  className="borderColorLightGray box overflowAuto rounding1 sizeSm solid"
   style={
     Object {
       "maxHeight": undefined,
diff --git a/packages/gestalt/src/__snapshots__/TableOfContents.test.tsx.snap b/packages/gestalt/src/__snapshots__/TableOfContents.test.tsx.snap
index 1813099b86..164eedfc05 100644
--- a/packages/gestalt/src/__snapshots__/TableOfContents.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/TableOfContents.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`TableOfContents renders 1`] = `
       className="noStyle marginTop1"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -89,7 +89,7 @@ exports[`TableOfContents renders an accessibility label 1`] = `
       className="noStyle marginTop1"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -147,7 +147,7 @@ exports[`TableOfContents renders nested items 1`] = `
       className="noStyle marginTop1"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -194,7 +194,7 @@ exports[`TableOfContents renders nested items 1`] = `
           className="noStyle marginTop1"
         >
           <a
-            className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+            className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
             href="#"
             onBlur={[Function]}
             onClick={[Function]}
@@ -239,7 +239,7 @@ exports[`TableOfContents renders nested items 1`] = `
           className="noStyle marginTop1"
         >
           <a
-            className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+            className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
             href="#"
             onBlur={[Function]}
             onClick={[Function]}
@@ -299,7 +299,7 @@ exports[`TableOfContents renders without title 1`] = `
       className="noStyle marginTop1"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -344,7 +344,7 @@ exports[`TableOfContents renders without title 1`] = `
       className="noStyle marginTop1"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
diff --git a/packages/gestalt/src/__snapshots__/TableRowDrawer.test.tsx.snap b/packages/gestalt/src/__snapshots__/TableRowDrawer.test.tsx.snap
index 7669b22032..81a2f10db1 100644
--- a/packages/gestalt/src/__snapshots__/TableRowDrawer.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/TableRowDrawer.test.tsx.snap
@@ -177,7 +177,7 @@ exports[`renders correctly with drawer 1`] = `
             className="box paddingX200 paddingY200"
           >
             <div
-              className="box mdDirectionRow paddingX400 paddingY0 paddingY400 recommendationWeak rounding400 xsDirectionColumn xsDisplayFlex xsItemsCenter"
+              className="box mdDirectionRow paddingX400 paddingY0 paddingY400 recommendationWeak rounding4 xsDirectionColumn xsDisplayFlex xsItemsCenter"
               style={
                 Object {
                   "width": "100%",
diff --git a/packages/gestalt/src/__snapshots__/Tabs.test.tsx.snap b/packages/gestalt/src/__snapshots__/Tabs.test.tsx.snap
index 3a804dc16f..cd1f31a797 100644
--- a/packages/gestalt/src/__snapshots__/Tabs.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Tabs.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`<Tabs /> matches snapshot with default props 1`] = `
     >
       <a
         aria-current="page"
-        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -34,7 +34,7 @@ exports[`<Tabs /> matches snapshot with default props 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionColumn xsItemsCenter"
         >
           <div
-            className="box paddingX200 paddingY200 relative rounding200 userSelectNone"
+            className="box paddingX200 paddingY200 relative rounding2 userSelectNone"
             style={
               Object {
                 "backgroundColor": "var(--color-background-tabs-default-base)",
@@ -94,7 +94,7 @@ exports[`<Tabs /> matches snapshot with default props 1`] = `
       className="paddingY"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -116,7 +116,7 @@ exports[`<Tabs /> matches snapshot with default props 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionColumn xsItemsCenter"
         >
           <div
-            className="box paddingX200 paddingY200 relative rounding200 userSelectNone"
+            className="box paddingX200 paddingY200 relative rounding2 userSelectNone"
             style={
               Object {
                 "backgroundColor": "var(--color-background-tabs-default-base)",
@@ -162,7 +162,7 @@ exports[`<Tabs /> matches snapshot with dot indicators 1`] = `
     >
       <a
         aria-current="page"
-        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -184,7 +184,7 @@ exports[`<Tabs /> matches snapshot with dot indicators 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionColumn xsItemsCenter"
         >
           <div
-            className="box paddingX200 paddingY200 relative rounding200 userSelectNone"
+            className="box paddingX200 paddingY200 relative rounding2 userSelectNone"
             style={
               Object {
                 "backgroundColor": "var(--color-background-tabs-default-base)",
@@ -258,7 +258,7 @@ exports[`<Tabs /> matches snapshot with dot indicators 1`] = `
       className="paddingY"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -280,7 +280,7 @@ exports[`<Tabs /> matches snapshot with dot indicators 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionColumn xsItemsCenter"
         >
           <div
-            className="box paddingX200 paddingY200 relative rounding200 userSelectNone"
+            className="box paddingX200 paddingY200 relative rounding2 userSelectNone"
             style={
               Object {
                 "backgroundColor": "var(--color-background-tabs-default-base)",
@@ -340,7 +340,7 @@ exports[`<Tabs /> matches snapshot with wrap 1`] = `
     >
       <a
         aria-current="page"
-        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -362,7 +362,7 @@ exports[`<Tabs /> matches snapshot with wrap 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionColumn xsItemsCenter"
         >
           <div
-            className="box paddingX200 paddingY200 relative rounding200 userSelectNone"
+            className="box paddingX200 paddingY200 relative rounding2 userSelectNone"
             style={
               Object {
                 "backgroundColor": "var(--color-background-tabs-default-base)",
@@ -422,7 +422,7 @@ exports[`<Tabs /> matches snapshot with wrap 1`] = `
       className="paddingY"
     >
       <a
-        className="noOutline inheritColor noUnderline tapTransition rounding200 accessibilityOutline block fullWidth pointer"
+        className="noOutline inheritColor noUnderline tapTransition rounding2 accessibilityOutline block fullWidth pointer"
         href="#"
         onBlur={[Function]}
         onClick={[Function]}
@@ -444,7 +444,7 @@ exports[`<Tabs /> matches snapshot with wrap 1`] = `
           className="Flex rowGap0 columnGap0 xsDirectionColumn xsItemsCenter"
         >
           <div
-            className="box paddingX200 paddingY200 relative rounding200 userSelectNone"
+            className="box paddingX200 paddingY200 relative rounding2 userSelectNone"
             style={
               Object {
                 "backgroundColor": "var(--color-background-tabs-default-base)",
diff --git a/packages/gestalt/src/__snapshots__/Tag.test.tsx.snap b/packages/gestalt/src/__snapshots__/Tag.test.tsx.snap
index fccda3785f..916054315c 100644
--- a/packages/gestalt/src/__snapshots__/Tag.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Tag.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Tag clips long strings 1`] = `
 <div
   aria-disabled={false}
-  className="box paddingX200 paddingY100 relative rounding200 secondary xsDisplayInlineBlock"
+  className="box paddingX200 paddingY100 relative rounding2 secondary xsDisplayInlineBlock"
   style={
     Object {
       "height": 32,
@@ -70,7 +70,7 @@ exports[`Tag clips long strings 1`] = `
 exports[`Tag renders 1`] = `
 <div
   aria-disabled={false}
-  className="box paddingX200 paddingY100 relative rounding200 secondary xsDisplayInlineBlock"
+  className="box paddingX200 paddingY100 relative rounding2 secondary xsDisplayInlineBlock"
   style={
     Object {
       "height": 32,
@@ -137,7 +137,7 @@ exports[`Tag renders 1`] = `
 exports[`Tag renders a disabled tag 1`] = `
 <div
   aria-disabled={true}
-  className="box paddingX200 paddingY100 relative rounding200 secondary xsDisplayInlineBlock"
+  className="box paddingX200 paddingY100 relative rounding2 secondary xsDisplayInlineBlock"
   style={
     Object {
       "border": "solid 1px var(--color-border-tag-disabled)",
@@ -175,7 +175,7 @@ exports[`Tag renders a disabled tag 1`] = `
 exports[`Tag renders a tag with a warning state 1`] = `
 <div
   aria-disabled={false}
-  className="box paddingX200 paddingY100 relative rounding200 warningBase xsDisplayInlineBlock"
+  className="box paddingX200 paddingY100 relative rounding2 warningBase xsDisplayInlineBlock"
   style={
     Object {
       "height": 32,
@@ -259,7 +259,7 @@ exports[`Tag renders a tag with a warning state 1`] = `
 exports[`Tag renders a tag with an error state 1`] = `
 <div
   aria-disabled={false}
-  className="box errorBase paddingX200 paddingY100 relative rounding200 xsDisplayInlineBlock"
+  className="box errorBase paddingX200 paddingY100 relative rounding2 xsDisplayInlineBlock"
   style={
     Object {
       "height": 32,
diff --git a/packages/gestalt/src/__snapshots__/TagData.test.tsx.snap b/packages/gestalt/src/__snapshots__/TagData.test.tsx.snap
index 088793a2b4..8376e6293d 100644
--- a/packages/gestalt/src/__snapshots__/TagData.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/TagData.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`TagData TagData has a tooltip 1`] = `
 <div
-  className="box relative rounding200 xsDisplayInlineBlock"
+  className="box relative rounding2 xsDisplayInlineBlock"
   style={
     Object {
       "maxWidth": 300,
@@ -22,7 +22,7 @@ exports[`TagData TagData has a tooltip 1`] = `
     >
       <div
         aria-disabled={false}
-        className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+        className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -83,7 +83,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding200 xsDisplayInlineBlock"
+      className="box relative rounding2 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -103,7 +103,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -159,7 +159,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding200 xsDisplayInlineBlock"
+      className="box relative rounding2 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -179,7 +179,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -235,7 +235,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding200 xsDisplayInlineBlock"
+      className="box relative rounding2 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -255,7 +255,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -311,7 +311,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding200 xsDisplayInlineBlock"
+      className="box relative rounding2 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -331,7 +331,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -387,7 +387,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding200 xsDisplayInlineBlock"
+      className="box relative rounding2 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -407,7 +407,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -463,7 +463,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding200 xsDisplayInlineBlock"
+      className="box relative rounding2 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -483,7 +483,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -539,7 +539,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding200 xsDisplayInlineBlock"
+      className="box relative rounding2 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -559,7 +559,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -615,7 +615,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding200 xsDisplayInlineBlock"
+      className="box relative rounding2 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -635,7 +635,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -691,7 +691,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding200 xsDisplayInlineBlock"
+      className="box relative rounding2 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -711,7 +711,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -767,7 +767,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding200 xsDisplayInlineBlock"
+      className="box relative rounding2 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -787,7 +787,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -843,7 +843,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding200 xsDisplayInlineBlock"
+      className="box relative rounding2 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -863,7 +863,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -919,7 +919,7 @@ exports[`TagData renders all colors as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding200 xsDisplayInlineBlock"
+      className="box relative rounding2 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -939,7 +939,7 @@ exports[`TagData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1002,7 +1002,7 @@ exports[`TagData renders base color as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding200 xsDisplayInlineBlock"
+      className="box relative rounding2 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -1022,7 +1022,7 @@ exports[`TagData renders base color as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1134,7 +1134,7 @@ exports[`TagData renders base color as expected 1`] = `
     className="FlexItem"
   >
     <div
-      className="box relative rounding200 xsDisplayInlineBlock"
+      className="box relative rounding2 xsDisplayInlineBlock"
       style={
         Object {
           "maxWidth": 300,
@@ -1154,7 +1154,7 @@ exports[`TagData renders base color as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+            className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1267,7 +1267,7 @@ exports[`TagData renders base color as expected 1`] = `
 
 exports[`TagData renders disabled selected state 1`] = `
 <div
-  className="box relative rounding200 xsDisplayInlineBlock"
+  className="box relative rounding2 xsDisplayInlineBlock"
   style={
     Object {
       "maxWidth": 300,
@@ -1287,7 +1287,7 @@ exports[`TagData renders disabled selected state 1`] = `
     >
       <div
         aria-disabled={true}
-        className="tapTransition rounding200 fullHeight fullWidth"
+        className="tapTransition rounding2 fullHeight fullWidth"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -1393,7 +1393,7 @@ exports[`TagData renders disabled selected state 1`] = `
 
 exports[`TagData renders disabled unselected state 1`] = `
 <div
-  className="box relative rounding200 xsDisplayInlineBlock"
+  className="box relative rounding2 xsDisplayInlineBlock"
   style={
     Object {
       "maxWidth": 300,
@@ -1413,7 +1413,7 @@ exports[`TagData renders disabled unselected state 1`] = `
     >
       <div
         aria-disabled={true}
-        className="tapTransition rounding200 fullHeight fullWidth"
+        className="tapTransition rounding2 fullHeight fullWidth"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -1505,7 +1505,7 @@ exports[`TagData renders disabled unselected state 1`] = `
 
 exports[`TagData renders dismisible button with color background 1`] = `
 <div
-  className="box relative rounding200 xsDisplayInlineBlock"
+  className="box relative rounding2 xsDisplayInlineBlock"
   style={
     Object {
       "maxWidth": 300,
@@ -1525,7 +1525,7 @@ exports[`TagData renders dismisible button with color background 1`] = `
     >
       <div
         aria-disabled={false}
-        className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+        className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -1673,7 +1673,7 @@ exports[`TagData renders dismisible button with color background 1`] = `
 
 exports[`TagData renders dismissable button 1`] = `
 <div
-  className="box relative rounding200 xsDisplayInlineBlock"
+  className="box relative rounding2 xsDisplayInlineBlock"
   style={
     Object {
       "maxWidth": 300,
@@ -1693,7 +1693,7 @@ exports[`TagData renders dismissable button 1`] = `
     >
       <div
         aria-disabled={false}
-        className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+        className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -1845,7 +1845,7 @@ exports[`TagData renders tagdata in RTL mode as expected 1`] = `
   lang="en"
 >
   <div
-    className="box relative rounding200 xsDisplayInlineBlock"
+    className="box relative rounding2 xsDisplayInlineBlock"
     style={
       Object {
         "maxWidth": 300,
@@ -1854,7 +1854,7 @@ exports[`TagData renders tagdata in RTL mode as expected 1`] = `
   >
     <div
       aria-disabled={false}
-      className="tapTransition rounding200 accessibilityOutline fullHeight fullWidth pointer"
+      className="tapTransition rounding2 accessibilityOutline fullHeight fullWidth pointer"
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
diff --git a/packages/gestalt/src/__snapshots__/TextArea.test.tsx.snap b/packages/gestalt/src/__snapshots__/TextArea.test.tsx.snap
index 4df6b2d37f..e3e846b1b0 100644
--- a/packages/gestalt/src/__snapshots__/TextArea.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/TextArea.test.tsx.snap
@@ -255,7 +255,7 @@ exports[`TextArea renders tags when supplied 1`] = `
     >
       <div
         aria-disabled={false}
-        className="box paddingX200 paddingY100 relative rounding200 secondary xsDisplayInlineBlock"
+        className="box paddingX200 paddingY100 relative rounding2 secondary xsDisplayInlineBlock"
         style={
           Object {
             "height": 32,
@@ -323,7 +323,7 @@ exports[`TextArea renders tags when supplied 1`] = `
     >
       <div
         aria-disabled={false}
-        className="box paddingX200 paddingY100 relative rounding200 secondary xsDisplayInlineBlock"
+        className="box paddingX200 paddingY100 relative rounding2 secondary xsDisplayInlineBlock"
         style={
           Object {
             "height": 32,
@@ -391,7 +391,7 @@ exports[`TextArea renders tags when supplied 1`] = `
     >
       <div
         aria-disabled={false}
-        className="box paddingX200 paddingY100 relative rounding200 secondary xsDisplayInlineBlock"
+        className="box paddingX200 paddingY100 relative rounding2 secondary xsDisplayInlineBlock"
         style={
           Object {
             "height": 32,
diff --git a/packages/gestalt/src/__snapshots__/TextField.test.tsx.snap b/packages/gestalt/src/__snapshots__/TextField.test.tsx.snap
index 7c9e42c263..6e82eb5c8c 100644
--- a/packages/gestalt/src/__snapshots__/TextField.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/TextField.test.tsx.snap
@@ -340,7 +340,7 @@ exports[`TextField TextField with tags 1`] = `
       >
         <div
           aria-disabled={false}
-          className="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
+          className="box paddingX100 paddingYNaN relative rounding1 secondary xsDisplayInlineBlock"
           style={
             Object {
               "height": 24,
@@ -413,7 +413,7 @@ exports[`TextField TextField with tags 1`] = `
       >
         <div
           aria-disabled={false}
-          className="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
+          className="box paddingX100 paddingYNaN relative rounding1 secondary xsDisplayInlineBlock"
           style={
             Object {
               "height": 24,
@@ -486,7 +486,7 @@ exports[`TextField TextField with tags 1`] = `
       >
         <div
           aria-disabled={false}
-          className="box paddingX100 paddingYNaN relative rounding100 secondary xsDisplayInlineBlock"
+          className="box paddingX100 paddingYNaN relative rounding1 secondary xsDisplayInlineBlock"
           style={
             Object {
               "height": 24,
diff --git a/packages/gestalt/src/__snapshots__/TileData.test.tsx.snap b/packages/gestalt/src/__snapshots__/TileData.test.tsx.snap
index 5def2a9d0a..dc769b6de3 100644
--- a/packages/gestalt/src/__snapshots__/TileData.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/TileData.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -168,7 +168,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -313,7 +313,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -458,7 +458,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -603,7 +603,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -748,7 +748,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -893,7 +893,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1038,7 +1038,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1183,7 +1183,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1328,7 +1328,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1473,7 +1473,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1618,7 +1618,7 @@ exports[`TileData TileData renders all colors as expected 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1764,7 +1764,7 @@ exports[`TileData TileData renders with tooltip 1`] = `
     >
       <div
         aria-disabled={false}
-        className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+        className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -1914,7 +1914,7 @@ exports[`TileData TileData shows readonly checkboxes 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2114,7 +2114,7 @@ exports[`TileData TileData shows readonly checkboxes 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2314,7 +2314,7 @@ exports[`TileData TileData shows readonly checkboxes 1`] = `
         >
           <div
             aria-disabled={false}
-            className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+            className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2515,7 +2515,7 @@ exports[`TileData TileData title truncates when really long 1`] = `
     >
       <div
         aria-disabled={false}
-        className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+        className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -2659,7 +2659,7 @@ exports[`TileData Tiledata is disabled 1`] = `
     >
       <div
         aria-disabled={true}
-        className="tapTransition rounding400 fullWidth"
+        className="tapTransition rounding4 fullWidth"
         onBlur={[Function]}
         onClick={[Function]}
         onFocus={[Function]}
@@ -2844,7 +2844,7 @@ exports[`TileData renders 1`] = `
 >
   <div
     aria-disabled={false}
-    className="tapTransition rounding400 accessibilityOutline fullWidth pointer"
+    className="tapTransition rounding4 accessibilityOutline fullWidth pointer"
     onBlur={[Function]}
     onClick={[Function]}
     onFocus={[Function]}
diff --git a/packages/gestalt/src/__snapshots__/Toast.test.tsx.snap b/packages/gestalt/src/__snapshots__/Toast.test.tsx.snap
index 57c703f162..d0a2dac580 100644
--- a/packages/gestalt/src/__snapshots__/Toast.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Toast.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`<Toast /> Error Toast 1`] = `
   role="status"
 >
   <div
-    className="box errorBase paddingY300 rounding400"
+    className="box errorBase paddingY300 rounding4"
     style={
       Object {
         "paddingInlineEnd": "var(--rounding-400)",
@@ -60,7 +60,7 @@ exports[`<Toast /> Text + _dangerouslySetPrimaryAction 1`] = `
   role="status"
 >
   <div
-    className="box inverse paddingY300 rounding400"
+    className="box inverse paddingY300 rounding4"
     style={
       Object {
         "paddingInlineEnd": "var(--rounding-400)",
@@ -143,7 +143,7 @@ exports[`<Toast /> Text + Image + Button 1`] = `
   role="status"
 >
   <div
-    className="box inverse paddingY300 rounding400"
+    className="box inverse paddingY300 rounding4"
     style={
       Object {
         "paddingInlineEnd": "var(--rounding-400)",
@@ -163,7 +163,7 @@ exports[`<Toast /> Text + Image + Button 1`] = `
           className="box"
         >
           <div
-            className="Mask rounding200 willChangeTransform"
+            className="Mask rounding2 willChangeTransform"
             style={
               Object {
                 "height": 32,
@@ -264,7 +264,7 @@ exports[`<Toast /> Text + Image 1`] = `
   role="status"
 >
   <div
-    className="box inverse paddingY300 rounding400"
+    className="box inverse paddingY300 rounding4"
     style={
       Object {
         "paddingInlineEnd": "var(--rounding-400)",
@@ -284,7 +284,7 @@ exports[`<Toast /> Text + Image 1`] = `
           className="box"
         >
           <div
-            className="Mask rounding200 willChangeTransform"
+            className="Mask rounding2 willChangeTransform"
             style={
               Object {
                 "height": 32,
@@ -356,7 +356,7 @@ exports[`<Toast /> Text Only 1`] = `
   role="status"
 >
   <div
-    className="box inverse paddingY300 rounding400"
+    className="box inverse paddingY300 rounding4"
     style={
       Object {
         "paddingInlineEnd": "var(--rounding-400)",
diff --git a/packages/gestalt/src/__snapshots__/Video.test.tsx.snap b/packages/gestalt/src/__snapshots__/Video.test.tsx.snap
index ff3c9dd656..15abcf4b88 100644
--- a/packages/gestalt/src/__snapshots__/Video.test.tsx.snap
+++ b/packages/gestalt/src/__snapshots__/Video.test.tsx.snap
@@ -160,7 +160,7 @@ exports[`Video with children 1`] = `
           />
         </svg>
         <div
-          className="absolute box light marginTop100 rounding400"
+          className="absolute box light marginTop100 rounding4"
           style={
             Object {
               "height": 2,
@@ -214,7 +214,7 @@ exports[`Video with children 1`] = `
           tabIndex="-1"
         >
           <div
-            className="absolute box left0 right0 rounding200 secondary xsDisplayFlex"
+            className="absolute box left0 right0 rounding2 secondary xsDisplayFlex"
             style={
               Object {
                 "height": 4,
@@ -222,7 +222,7 @@ exports[`Video with children 1`] = `
             }
           >
             <div
-              className="box light rounding200"
+              className="box light rounding2"
               style={
                 Object {
                   "height": "100%",
diff --git a/packages/gestalt/src/boxTransforms.ts b/packages/gestalt/src/boxTransforms.ts
index 1560352cff..cb7cc275c4 100644
--- a/packages/gestalt/src/boxTransforms.ts
+++ b/packages/gestalt/src/boxTransforms.ts
@@ -266,7 +266,7 @@ const minWidth: Functor<Dimension> = (d) => fromInlineStyle({ minWidth: d });
 const opacityMap = mapClassName((name) => styles[name]);
 const opacity: Functor<Opacity> = (val) => {
   if (val > 0 && val < 1) {
-    return opacityMap(range('opacity0')(val * 0.1));
+    return opacityMap(range('opacity0')(val * 10));
   }
   return opacityMap(range('opacity')(val));
 };
diff --git a/packages/gestalt/src/transforms.ts b/packages/gestalt/src/transforms.ts
index b89530f992..5cbc144d5a 100644
--- a/packages/gestalt/src/transforms.ts
+++ b/packages/gestalt/src/transforms.ts
@@ -31,12 +31,12 @@ export const mapping =
 export const range =
   (scale: string): ((n: number) => Style) =>
   (n): Style =>
-    fromClassName(`${scale}${n < 0 ? `N${Math.abs(n * 100)}` : n * 100}`);
+    fromClassName(`${scale}${n < 0 ? `N${Math.abs(n)}` : n }`);
 
 export const rangeWithZero =
   (scale: string): ((n: number) => Style) =>
   (n): Style =>
-    range(scale)(n);
+    range(scale)(n * 100);
 
 // Binds a string classname to the value in an object. Useful when interacting
 // with ranges that need to come dynamically from a style object. This is

From df7afb722c53aa41395cc58425c3257e06552a2f Mon Sep 17 00:00:00 2001
From: acarreras <acarreras@pinterest.com>
Date: Fri, 25 Oct 2024 01:56:04 +0200
Subject: [PATCH 2/2] more

---
 packages/gestalt/src/transforms.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gestalt/src/transforms.ts b/packages/gestalt/src/transforms.ts
index 5cbc144d5a..ee02357ec3 100644
--- a/packages/gestalt/src/transforms.ts
+++ b/packages/gestalt/src/transforms.ts
@@ -31,7 +31,7 @@ export const mapping =
 export const range =
   (scale: string): ((n: number) => Style) =>
   (n): Style =>
-    fromClassName(`${scale}${n < 0 ? `N${Math.abs(n)}` : n }`);
+    fromClassName(`${scale}${n < 0 ? `N${Math.abs(n)}` : n}`);
 
 export const rangeWithZero =
   (scale: string): ((n: number) => Style) =>