Replacing gap values with design tokens

Author: GomezIvann

apps/website/screens/common/QuickNavContainer.tsx

@@ -31,7 +31,7 @@ const getSubSectionsLinks = (sections: SectionType[]) => {
 
 const DxcQuickNavContainer = ({ title = "On this page", sections, startHeadingLevel = 1 }: QuickNavContainerTypes): JSX.Element => (
   <MainContainer>
-    <DxcGrid gap="3rem" templateColumns={["minmax(0, 1fr)"]}>
+    <DxcGrid gap="var(--spacing-gap-xl)" templateColumns={["minmax(0, 1fr)"]}>
       {sections.map((section) => (
         <Section
           key={`section-${section.title}`}

apps/website/screens/components/dialog/code/examples/withContent.ts

@@ -22,7 +22,7 @@ const code = `() => {
           <DxcInset space="1.5rem">
             <DxcGrid gap="2rem">
               <DxcHeading level={2} text="Delivery address" weight="normal" />
-              <DxcGrid templateColumns={["1fr", "1fr"]} templateColumns={["1fr", "1fr"]} gap="1rem">
+              <DxcGrid templateColumns={["1fr", "1fr"]} templateColumns={["1fr", "1fr"]} gap="var(--spacing-gap-ml)">
                 <DxcTextInput label="Street" size="fillParent" />
                 <DxcTextInput label="City" size="fillParent" />
                 <DxcGrid.Item column={{ start: 1, end: 3 }}>

apps/website/screens/components/grid/code/examples/layout.tsx

@@ -5,7 +5,7 @@ const code = `() => {
   return (
     <DxcInset space="2rem">
       <DxcGrid
-        gap={{ rowGap: "0.5rem", columnGap: "1rem" }}
+        gap={{ rowGap: "var(--spacing-gap-s)", columnGap: "var(--spacing-gap-ml)" }}
         templateColumns={["repeat(4, 1fr)"]}
         templateRows={["40px", "200px", "60px"]}
         templateAreas={[
@@ -17,7 +17,7 @@ const code = `() => {
         <DxcGrid.Item areaName="header" as="header">
           <Placeholder height="100%" />
         </DxcGrid.Item>
-        <DxcGrid templateColumns={["repeat(4, 1fr)"]} gap="0.25rem" areaName="main" as="main">
+        <DxcGrid templateColumns={["repeat(4, 1fr)"]} gap="var(--spacing-gap-xs)" areaName="main" as="main">
           <Placeholder />
           <Placeholder />
           <Placeholder />