From fd68b49549d6774b9f83a0a341370dcfe9d7be35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20G=C3=B3mez=20Pinta?=
 <44321109+GomezIvann@users.noreply.github.com>
Date: Wed, 16 Apr 2025 10:23:22 +0200
Subject: [PATCH] New tokens added

---
 apps/website/screens/common/QuickNavContainer.tsx     |  2 +-
 .../checkbox/overview/examples/labelPosition.ts       |  2 +-
 .../components/checkbox/overview/examples/stacking.ts |  2 +-
 .../switch/overview/examples/labelPosition.ts         |  2 +-
 .../components/switch/overview/examples/stacking.ts   |  2 +-
 .../toggle-group/code/examples/uncontrolled.ts        |  2 +-
 packages/lib/src/paginator/Paginator.tsx              |  2 +-
 packages/lib/src/styles/variables.css                 | 11 +++++++++--
 8 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/apps/website/screens/common/QuickNavContainer.tsx b/apps/website/screens/common/QuickNavContainer.tsx
index 39b72437e7..ad5c0b440f 100644
--- a/apps/website/screens/common/QuickNavContainer.tsx
+++ b/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="var(--spacing-gap-xl)" templateColumns={["minmax(0, 1fr)"]}>
+    <DxcGrid gap="var(--spacing-gap-xxl)" templateColumns={["minmax(0, 1fr)"]}>
       {sections.map((section) => (
         <Section
           key={`section-${section.title}`}
diff --git a/apps/website/screens/components/checkbox/overview/examples/labelPosition.ts b/apps/website/screens/components/checkbox/overview/examples/labelPosition.ts
index 060382b0ad..406e51548e 100644
--- a/apps/website/screens/components/checkbox/overview/examples/labelPosition.ts
+++ b/apps/website/screens/components/checkbox/overview/examples/labelPosition.ts
@@ -3,7 +3,7 @@ import { DxcCheckbox, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
 const code = `() => {
   return (
     <DxcInset space="2rem">
-      <DxcFlex justifyContent="center" gap="var(--spacing-gap-xl)">
+      <DxcFlex justifyContent="center" gap="var(--spacing-gap-xxl)">
         <DxcCheckbox defaultChecked label="Check all" />
         <DxcCheckbox label="Check all" labelPosition="after" />
       </DxcFlex>
diff --git a/apps/website/screens/components/checkbox/overview/examples/stacking.ts b/apps/website/screens/components/checkbox/overview/examples/stacking.ts
index e63ce15200..7b4de3b288 100644
--- a/apps/website/screens/components/checkbox/overview/examples/stacking.ts
+++ b/apps/website/screens/components/checkbox/overview/examples/stacking.ts
@@ -3,7 +3,7 @@ import { DxcCheckbox, DxcInset, DxcFlex, DxcTypography } from "@dxc-technology/h
 const code = `() => {
   return (
     <DxcInset space="2rem">
-      <DxcFlex gap="var(--spacing-gap-xl)" justifyContent="center">
+      <DxcFlex gap="var(--spacing-gap-xxl)" justifyContent="center">
         <DxcFlex direction="column" gap="var(--spacing-gap-xs)">
           <DxcTypography
             color="var(--color-fg-neutral-dark)"
diff --git a/apps/website/screens/components/switch/overview/examples/labelPosition.ts b/apps/website/screens/components/switch/overview/examples/labelPosition.ts
index ee61f300bd..de4d34ae5f 100644
--- a/apps/website/screens/components/switch/overview/examples/labelPosition.ts
+++ b/apps/website/screens/components/switch/overview/examples/labelPosition.ts
@@ -3,7 +3,7 @@ import { DxcSwitch, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
 const code = `() => {
   return (
     <DxcInset space="2rem">
-      <DxcFlex justifyContent="center" gap="var(--spacing-gap-xl)">
+      <DxcFlex justifyContent="center" gap="var(--spacing-gap-xxl)">
         <DxcSwitch defaultChecked label="Show all" />
         <DxcSwitch label="Off" labelPosition="after" />
       </DxcFlex>
diff --git a/apps/website/screens/components/switch/overview/examples/stacking.ts b/apps/website/screens/components/switch/overview/examples/stacking.ts
index 493a67c7cb..2810a28ab8 100644
--- a/apps/website/screens/components/switch/overview/examples/stacking.ts
+++ b/apps/website/screens/components/switch/overview/examples/stacking.ts
@@ -3,7 +3,7 @@ import { DxcSwitch, DxcInset, DxcFlex, DxcTypography } from "@dxc-technology/hal
 const code = `() => {
   return (
     <DxcInset space="2rem">
-      <DxcFlex gap="var(--spacing-gap-xl)" justifyContent="center">
+      <DxcFlex gap="var(--spacing-gap-xxl)" justifyContent="center">
         <DxcFlex direction="column" gap="var(--spacing-gap-xs)">
           <DxcTypography
             color="var(--color-fg-neutral-dark)"
diff --git a/apps/website/screens/components/toggle-group/code/examples/uncontrolled.ts b/apps/website/screens/components/toggle-group/code/examples/uncontrolled.ts
index f0a5e8619d..98b2643104 100644
--- a/apps/website/screens/components/toggle-group/code/examples/uncontrolled.ts
+++ b/apps/website/screens/components/toggle-group/code/examples/uncontrolled.ts
@@ -72,7 +72,7 @@ const code = `() => {
 
   return (
     <DxcInset space="2rem">
-      <DxcFlex gap="var(--spacing-gap-xl)">
+      <DxcFlex gap="var(--spacing-gap-xxl)">
         <DxcToggleGroup
           multiple
           onChange={onChange}
diff --git a/packages/lib/src/paginator/Paginator.tsx b/packages/lib/src/paginator/Paginator.tsx
index 0c8ed6692a..6dd100ed0e 100644
--- a/packages/lib/src/paginator/Paginator.tsx
+++ b/packages/lib/src/paginator/Paginator.tsx
@@ -54,7 +54,7 @@ const DxcPaginator = ({
   `;
 
   const TotalItemsContainer = styled.span`
-    margin-right: var(--spacing-gap-xl);
+    margin-right: var(--spacing-gap-xxl);
   `;
 
   const GoToPageContainer = styled.div`
diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css
index 4a3516229b..834c43b9ec 100644
--- a/packages/lib/src/styles/variables.css
+++ b/packages/lib/src/styles/variables.css
@@ -108,6 +108,7 @@
   --font-size-20: 20px;
   --font-size-24: 24px;
   --font-size-32: 32px;
+  --font-size-40: 40px;
   --font-size-48: 48px;
   --font-size-60: 60px;
   --font-weight-light: 300;
@@ -120,7 +121,7 @@
   --font-style-normal: normal;
   --line-style-dashed: dashed;
   --line-style-solid: solid;
-  
+
   /* Alias */
   --border-color-error-light: var(--color-red-300);
   --border-color-error-medium: var(--color-red-600);
@@ -277,7 +278,8 @@
   --spacing-gap-m: var(--dimensions-12);
   --spacing-gap-ml: var(--dimensions-16);
   --spacing-gap-l: var(--dimensions-24);
-  --spacing-gap-xl: var(--dimensions-48);
+  --spacing-gap-xl: var(--dimensions-32);
+  --spacing-gap-xxl: var(--dimensions-48);
   --spacing-padding-none: var(--dimensions-0);
   --spacing-padding-xxxs: var(--dimensions-2);
   --spacing-padding-xxs: var(--dimensions-4);
@@ -300,6 +302,9 @@
   --typography-heading-m: var(--font-size-20);
   --typography-heading-l: var(--font-size-24);
   --typography-heading-xl: var(--font-size-32);
+  --typography-heading-xxl: var(--font-size-40);
+  --typography-heading-light: var(--font-weight-light);
+  --typography-heading-regular: var(--font-weight-regular);
   --typography-heading-semibold: var(--font-weight-semibold);
   --typography-helper-text-s: var(--font-size-12);
   --typography-helper-text-m: var(--font-size-14);
@@ -313,6 +318,8 @@
   --typography-label-xl: var(--font-size-20);
   --typography-label-regular: var(--font-weight-regular);
   --typography-label-semibold: var(--font-weight-semibold);
+  --typography-link-m: var(--font-size-14);
+  --typography-link-regular: var(--font-weight-regular);
   --typography-title-s: var(--font-size-14);
   --typography-title-m: var(--font-size-16);
   --typography-title-l: var(--font-size-20);