From b3089813ebf4b869a13e7216a70ff542b222c499 Mon Sep 17 00:00:00 2001
From: Mil4n0r <morenocarmonaenrique@gmail.com>
Date: Mon, 2 Feb 2026 13:26:16 +0100
Subject: [PATCH 1/2] Fixed tokens list and doc

---
 .../foundations/tokens/CoreTokenList.tsx      | 51 -------------------
 packages/lib/src/styles/tokens.ts             | 39 +++++++-------
 packages/lib/src/styles/variables.css         |  2 +-
 3 files changed, 19 insertions(+), 73 deletions(-)

diff --git a/apps/website/screens/foundations/tokens/CoreTokenList.tsx b/apps/website/screens/foundations/tokens/CoreTokenList.tsx
index 54c94f3c8..7076a5c52 100644
--- a/apps/website/screens/foundations/tokens/CoreTokenList.tsx
+++ b/apps/website/screens/foundations/tokens/CoreTokenList.tsx
@@ -7,56 +7,6 @@ import TokensTable from "./tables/TokensTable";
 const sections = [
   {
     title: "Colors",
-    content: (
-      <>
-        <>
-          {/* Color Tokens */}
-          <DxcHeading level={4} text="Colors" />
-          <DxcHeading level={5} text="Absolute color tokens" />
-          <TokensTable categories={["color-absolutes"]} type="core" />
-          <DxcHeading level={5} text="Primary color tokens" />
-          <TokensTable categories={["color-primary"]} type="core" />
-          <DxcHeading level={5} text="Secondary color tokens" />
-          <TokensTable categories={["color-secondary"]} type="core" />
-          <DxcHeading level={5} text="Tertiary color tokens" />
-          <TokensTable categories={["color-tertiary"]} type="core" />
-          <DxcHeading level={5} text="Neutral color tokens" />
-          <TokensTable categories={["color-neutral"]} type="core" />
-          <DxcHeading level={5} text="Semantic 01 color tokens" />
-          <TokensTable categories={["color-semantic01"]} type="core" />
-          <DxcHeading level={5} text="Semantic 02 color tokens" />
-          <TokensTable categories={["color-semantic02"]} type="core" />
-          <DxcHeading level={5} text="Semantic 03 color tokens" />
-          <TokensTable categories={["color-semantic03"]} type="core" />
-          <DxcHeading level={5} text="Semantic 04 color tokens" />
-          <TokensTable categories={["color-semantic04"]} type="core" />
-          <DxcHeading level={5} text="Alpha color tokens" />
-          <TokensTable categories={["color-alpha"]} type="core" />
-        </>
-        <>
-          {/* Dimensions Tokens */}
-          <DxcHeading level={4} text="Dimensions" />
-          <TokensTable categories={["dimensions"]} type="core" />
-        </>
-        <>
-          {/* Font Tokens */}
-          <DxcHeading level={4} text="Font" />
-          <DxcHeading level={5} text="Font size tokens" />
-          <TokensTable categories={["font-size"]} type="core" />
-          <DxcHeading level={5} text="Font weight tokens" />
-          <TokensTable categories={["font-weight"]} type="core" />
-          <DxcHeading level={5} text="Font family tokens" />
-          <TokensTable categories={["font-family"]} type="core" />
-          <DxcHeading level={5} text="Font style tokens" />
-          <TokensTable categories={["font-style"]} type="core" />
-        </>
-        <>
-          {/* Border Tokens */}
-          <DxcHeading level={4} text="Border" />
-          <TokensTable categories={["line-style"]} type="core" />
-        </>
-      </>
-    ),
     subSections: [
       { title: "Absolute", content: <TokensTable categories={["color-absolutes"]} type="core" /> },
       { title: "Primary", content: <TokensTable categories={["color-primary"]} type="core" /> },
@@ -73,7 +23,6 @@ const sections = [
   { title: "Dimensions", content: <TokensTable categories={["dimensions"]} type="core" /> },
   {
     title: "Font",
-    content: <TokensTable categories={["font-size", "font-weight", "font-family", "font-style"]} type="core" />,
     subSections: [
       {
         title: "Font size",
diff --git a/packages/lib/src/styles/tokens.ts b/packages/lib/src/styles/tokens.ts
index a1a657dec..f634b6c09 100644
--- a/packages/lib/src/styles/tokens.ts
+++ b/packages/lib/src/styles/tokens.ts
@@ -19,9 +19,9 @@ export const coreTokens: Record<string, string | number> = {
   "--z-contextualmenu": 340,
 
   /* Modals and overlays */
-  "--z-spinner-overlay": 400,
-  "--z-progressbar-overlay": 410,
-  "--z-dialog": 420,
+  "--z-dialog": 400,
+  "--z-spinner-overlay": 410,
+  "--z-progressbar-overlay": 420,
   "--z-alert": 430,
 
   /* Notifications */
@@ -33,6 +33,8 @@ export const coreTokens: Record<string, string | number> = {
   /************/
   /** TOKENS **/
   /************/
+
+  /* Core tokens */
   "--color-absolutes-black": "#000000",
   "--color-absolutes-white": "#ffffff",
   "--color-alpha-100-a": "#ebebeb1a",
@@ -167,6 +169,11 @@ export const coreTokens: Record<string, string | number> = {
 };
 
 export const aliasTokens: Record<string, string | number> = {
+  /************/
+  /** TOKENS **/
+  /************/
+
+  /* Alias tokens */
   "--border-color-info-lightest": "var(--color-semantic01-50)",
   "--border-color-info-lighter": "var(--color-semantic01-100)",
   "--border-color-info-light": "var(--color-semantic01-200)",
@@ -299,8 +306,6 @@ export const aliasTokens: Record<string, string | number> = {
   "--color-fg-secondary-strong": "var(--color-secondary-700)",
   "--color-fg-secondary-stronger": "var(--color-secondary-800)",
   "--color-fg-secondary-strongest": "var(--color-secondary-900)",
-  "--shadow-dark": "var(--color-alpha-400-a)",
-  "--shadow-light": "var(--color-alpha-300-a)",
   "--border-radius-none": "var(--dimensions-0)",
   "--border-radius-xs": "var(--dimensions-2)",
   "--border-radius-s": "var(--dimensions-4)",
@@ -320,22 +325,14 @@ export const aliasTokens: Record<string, string | number> = {
   "--height-xl": "var(--dimensions-40)",
   "--height-xxl": "var(--dimensions-48)",
   "--height-xxxl": "var(--dimensions-56)",
-  "--shadow-high-spread": "var(--dimensions-0)",
-  "--shadow-high-x-position": "var(--dimensions-0)",
-  "--shadow-high-blur": "var(--dimensions-24)",
-  "--shadow-high-y-position": "var(--dimensions-24)",
-  "--shadow-higher-spread": "var(--dimensions-0)",
-  "--shadow-higher-x-position": "var(--dimensions-0)",
-  "--shadow-higher-blur": "var(--dimensions-48)",
-  "--shadow-higher-y-position": "var(--dimensions-48)",
-  "--shadow-low-spread": "var(--dimensions-0)",
-  "--shadow-low-x-position": "var(--dimensions-0)",
-  "--shadow-low-blur": "var(--dimensions-2)",
-  "--shadow-low-y-position": "var(--dimensions-2)",
-  "--shadow-mid-spread": "var(--dimensions-0)",
-  "--shadow-mid-x-position": "var(--dimensions-0)",
-  "--shadow-mid-blur": "var(--dimensions-12)",
-  "--shadow-mid-y-position": "var(--dimensions-12)",
+  "--shadow-100":
+    "var(--dimensions-0) var(--dimensions-2) var(--dimensions-2) var(--dimensions-0) var(--color-alpha-400-a)",
+  "--shadow-200":
+    "var(--dimensions-0) var(--dimensions-12) var(--dimensions-12) var(--dimensions-0) var(--color-alpha-300-a)",
+  "--shadow-300":
+    "var(--dimensions-0) var(--dimensions-24) var(--dimensions-24) var(--dimensions-0) var(--color-alpha-300-a)",
+  "--shadow-400":
+    "var(--dimensions-0) var(--dimensions-48) var(--dimensions-48) var(--dimensions-0) var(--color-alpha-300-a)",
   "--spacing-gap-none": "var(--dimensions-0)",
   "--spacing-gap-xxs": "var(--dimensions-2)",
   "--spacing-gap-xs": "var(--dimensions-4)",
diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css
index cf4919b5d..d668cd797 100644
--- a/packages/lib/src/styles/variables.css
+++ b/packages/lib/src/styles/variables.css
@@ -367,6 +367,7 @@
   --typography-helper-text-light: var(--font-weight-light);
   --typography-helper-text-regular: var(--font-weight-regular);
   --typography-helper-text-semibold: var(--font-weight-semibold);
+  --typography-helper-text-italic: var(--font-style-lightitalic);
   --typography-label-s: var(--font-size-12);
   --typography-label-m: var(--font-size-14);
   --typography-label-l: var(--font-size-16);
@@ -383,5 +384,4 @@
   --border-style-default: var(--line-style-solid);
   --border-style-outline: var(--line-style-dashed);
   --typography-font-family: var(--font-family-sans);
-  --typography-helper-text-italic: var(--font-style-lightitalic);
 }

From efad6c630f783dbea7f268f9d5c19d8994b18d69 Mon Sep 17 00:00:00 2001
From: Mil4n0r <morenocarmonaenrique@gmail.com>
Date: Mon, 2 Feb 2026 16:25:46 +0100
Subject: [PATCH 2/2] Added shadow to doc

---
 .../screens/foundations/tokens/AliasTokenList.tsx        | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/apps/website/screens/foundations/tokens/AliasTokenList.tsx b/apps/website/screens/foundations/tokens/AliasTokenList.tsx
index f7c16a6bd..095880123 100644
--- a/apps/website/screens/foundations/tokens/AliasTokenList.tsx
+++ b/apps/website/screens/foundations/tokens/AliasTokenList.tsx
@@ -18,7 +18,6 @@ const sections = [
     subSections: [
       { title: "Border", content: <TokensTable categories={["border-color"]} type="alias" /> },
       { title: "Background", content: <TokensTable categories={["color-bg"]} type="alias" /> },
-      { title: "Shadow", content: <TokensTable categories={["shadow-dark", "shadow-light"]} type="alias" /> },
       { title: "Text", content: <TokensTable categories={["color-fg"]} type="alias" /> },
     ],
   },
@@ -26,13 +25,13 @@ const sections = [
     title: "Dimensions",
     subSections: [
       { title: "Height", content: <TokensTable categories={["height"]} type="alias" /> },
-      {
-        title: "Shadow",
-        content: <TokensTable categories={["shadow-high", "shadow-mid", "shadow-low"]} type="alias" />,
-      },
       { title: "Spacing", content: <TokensTable categories={["spacing-gap", "spacing-padding"]} type="alias" /> },
     ],
   },
+  {
+    title: "Shadow",
+    content: <TokensTable categories={["shadow"]} type="alias" />,
+  },
   {
     title: "Typography",
     subSections: [