New design tokens

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}`}

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>

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)"

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>

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)"

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}

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`

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);