From c66561e38b638d69b7bc474b5fc7d4867b7a4404 Mon Sep 17 00:00:00 2001
From: Maria Hutt <maria.hutt@outsystems.com>
Date: Thu, 12 Mar 2026 11:01:57 -0700
Subject: [PATCH] refactor(tokens): rearrange shared tokens

---
 core/src/themes/base/shared.tokens.ts   | 23 +++++++++++++
 core/src/themes/ionic/default.tokens.ts | 11 ++++---
 core/src/themes/ionic/shared.tokens.ts  | 35 ++++++--------------
 core/src/themes/ios/default.tokens.ts   | 17 +++++-----
 core/src/themes/ios/shared.tokens.ts    | 29 ++++-------------
 core/src/themes/md/default.tokens.ts    | 21 ++++++------
 core/src/themes/md/shared.tokens.ts     | 43 ++++++++++---------------
 7 files changed, 82 insertions(+), 97 deletions(-)
 create mode 100644 core/src/themes/base/shared.tokens.ts

diff --git a/core/src/themes/base/shared.tokens.ts b/core/src/themes/base/shared.tokens.ts
new file mode 100644
index 0000000000..e3e614c195
--- /dev/null
+++ b/core/src/themes/base/shared.tokens.ts
@@ -0,0 +1,23 @@
+/**
+ * Tokens shared between the theme files.
+ */
+
+const hexColors = {
+  white: '#ffffff',
+  black: '#000000',
+};
+
+const rgbColors = {
+  white: '255, 255, 255',
+  black: '0, 0, 0',
+};
+
+export const colors = {
+  ...hexColors,
+
+  backgroundColor: `var(--ion-background-color, ${hexColors.white})`,
+  backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`,
+
+  textColor: `var(--ion-text-color, ${hexColors.black})`,
+  textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`,
+};
diff --git a/core/src/themes/ionic/default.tokens.ts b/core/src/themes/ionic/default.tokens.ts
index b26869a2ce..2571c30cdf 100644
--- a/core/src/themes/ionic/default.tokens.ts
+++ b/core/src/themes/ionic/default.tokens.ts
@@ -1,10 +1,11 @@
 import { currentColor, mix, dynamicFont } from '../../utils/theme';
 import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
+import { colors as baseColors } from '../base/shared.tokens';
 import type { DefaultTheme } from '../themes.interfaces';
 
 import { darkTheme } from './dark.tokens';
 import { lightTheme } from './light.tokens';
-import { fontSizes, colors, components } from './shared.tokens';
+import { components } from './shared.tokens';
 
 export const defaultTheme: DefaultTheme = {
   ...baseDefaultTheme,
@@ -264,8 +265,8 @@ export const defaultTheme: DefaultTheme = {
     },
 
     IonItemDivider: {
-      background: `var(--ion-background-color, ${colors.white})`,
-      color: `var(--ion-text-color-step-600, ${mix(colors.white, colors.black, '40%')})`,
+      background: baseColors.backgroundColor,
+      color: `var(--ion-text-color-step-600, ${mix(baseColors.white, baseColors.black, '40%')})`,
       minHeight: 'var(--ion-scaling-750)',
       zIndex: 100,
 
@@ -290,7 +291,7 @@ export const defaultTheme: DefaultTheme = {
       },
 
       font: {
-        size: dynamicFont(fontSizes.itemDividerBase),
+        size: dynamicFont(components.itemDivider.font.size),
       },
 
       leading: {
@@ -332,7 +333,7 @@ export const defaultTheme: DefaultTheme = {
            * font size in pixels.
            * e.g. 24px / 14px = 1.7142857143em
            */
-          size: `${components.item.icon.slot.font.size / fontSizes.itemDividerBase}em`,
+          size: `${components.item.icon.slot.font.size / components.itemDivider.font.size}em`,
         },
 
         leading: {
diff --git a/core/src/themes/ionic/shared.tokens.ts b/core/src/themes/ionic/shared.tokens.ts
index 506b70a07d..361f59a86d 100644
--- a/core/src/themes/ionic/shared.tokens.ts
+++ b/core/src/themes/ionic/shared.tokens.ts
@@ -4,30 +4,7 @@
  */
 
 import { mix, rgba } from '../../utils/theme';
-
-const hexColors = {
-  white: '#ffffff',
-  black: '#000000',
-};
-
-const rgbColors = {
-  white: '255, 255, 255',
-  black: '0, 0, 0',
-};
-
-export const colors = {
-  ...hexColors,
-
-  backgroundColor: `var(--ion-background-color, ${hexColors.white})`,
-  backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`,
-
-  textColor: `var(--ion-text-color, ${hexColors.black})`,
-  textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`,
-};
-
-export const fontSizes = {
-  itemDividerBase: 14,
-};
+import { colors as baseColors } from '../base/shared.tokens';
 
 export const components = {
   item: {
@@ -68,7 +45,7 @@ export const components = {
 
     icon: {
       slot: {
-        color: rgba(colors.textColorRgb, 0.54),
+        color: rgba(baseColors.textColorRgb, 0.54),
 
         font: {
           size: 24,
@@ -153,7 +130,13 @@ export const components = {
     },
 
     paragraph: {
-      color: `var(--ion-text-color-400, ${mix(colors.white, colors.black, '40%')})`,
+      color: `var(--ion-text-color-400, ${mix(baseColors.white, baseColors.black, '40%')})`,
+    },
+  },
+
+  itemDivider: {
+    font: {
+      size: 14,
     },
   },
 };
diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts
index a819503f87..3d7cefc7af 100644
--- a/core/src/themes/ios/default.tokens.ts
+++ b/core/src/themes/ios/default.tokens.ts
@@ -1,12 +1,13 @@
 import { rgba, currentColor, clamp, mix, dynamicFont } from '../../utils/theme';
 import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
+import { colors as baseColors } from '../base/shared.tokens';
 import type { DefaultTheme } from '../themes.interfaces';
 
 import { darkTheme } from './dark.tokens';
 import { highContrastDarkTheme } from './high-contrast-dark.tokens';
 import { highContrastTheme } from './high-contrast.tokens';
 import { lightTheme } from './light.tokens';
-import { fontSizes, colors, components } from './shared.tokens';
+import { global, components } from './shared.tokens';
 
 export const defaultTheme: DefaultTheme = {
   ...baseDefaultTheme,
@@ -113,7 +114,7 @@ export const defaultTheme: DefaultTheme = {
           font: {
             size: clamp(
               'var(--ion-font-size-xs)',
-              `${((fontSizes.chipBase - 2) / fontSizes.root).toFixed(2)}rem`,
+              `${((components.chip.font.size - 2) / global.root).toFixed(2)}rem`,
               'var(--ion-font-size-xl)'
             ),
           },
@@ -123,7 +124,7 @@ export const defaultTheme: DefaultTheme = {
           minHeight: 'var(--ion-scaling-md)',
 
           font: {
-            size: clamp('13px', `${(fontSizes.chipBase / fontSizes.root).toFixed(2)}rem`, '22px'),
+            size: clamp('13px', `${(components.chip.font.size / global.root).toFixed(2)}rem`, '22px'),
           },
         },
       },
@@ -351,7 +352,7 @@ export const defaultTheme: DefaultTheme = {
         color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.54),
 
         font: {
-          size: `${(20 / fontSizes.chipBase).toFixed(2)}em`,
+          size: `${(20 / components.chip.font.size).toFixed(2)}em`,
         },
 
         // Targets `:first-child`
@@ -376,8 +377,8 @@ export const defaultTheme: DefaultTheme = {
       },
 
       avatar: {
-        height: `${(24 / fontSizes.chipBase).toFixed(2)}em`,
-        width: `${(24 / fontSizes.chipBase).toFixed(2)}em`,
+        height: `${(24 / components.chip.font.size).toFixed(2)}em`,
+        width: `${(24 / components.chip.font.size).toFixed(2)}em`,
 
         // Targets `:first-child`
         leading: {
@@ -402,8 +403,8 @@ export const defaultTheme: DefaultTheme = {
     },
 
     IonItemDivider: {
-      background: `var(--ion-background-color-step-100, ${mix(colors.black, colors.white, '90%')})`,
-      color: `var(--ion-text-color-step-150, ${mix(colors.white, colors.black, '85%')})`,
+      background: `var(--ion-background-color-step-100, ${mix(baseColors.black, baseColors.white, '90%')})`,
+      color: `var(--ion-text-color-step-150, ${mix(baseColors.white, baseColors.black, '85%')})`,
       minHeight: 'var(--ion-scaling-sm)',
 
       padding: {
diff --git a/core/src/themes/ios/shared.tokens.ts b/core/src/themes/ios/shared.tokens.ts
index 0be264607a..c019ae35cf 100644
--- a/core/src/themes/ios/shared.tokens.ts
+++ b/core/src/themes/ios/shared.tokens.ts
@@ -6,32 +6,17 @@
 import { dynamicFont } from '../../utils/theme';
 import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
 
-const hexColors = {
-  white: '#ffffff',
-  black: '#000000',
-};
-
-const rgbColors = {
-  white: '255, 255, 255',
-  black: '0, 0, 0',
-};
-
-export const colors = {
-  ...hexColors,
-
-  backgroundColor: `var(--ion-background-color, ${hexColors.white})`,
-  backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`,
-
-  textColor: `var(--ion-text-color, ${hexColors.black})`,
-  textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`,
-};
-
-export const fontSizes = {
-  chipBase: 14,
+export const global = {
   root: parseFloat(baseDefaultTheme.fontSize!.root as string),
 };
 
 export const components = {
+  chip: {
+    font: {
+      size: 14,
+    },
+  },
+
   item: {
     padding: {
       start: 'var(--ion-spacing-lg)',
diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts
index 64614cf842..38bcb0fda6 100644
--- a/core/src/themes/md/default.tokens.ts
+++ b/core/src/themes/md/default.tokens.ts
@@ -1,12 +1,13 @@
 import { rgba, currentColor, mix, dynamicFont } from '../../utils/theme';
 import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
+import { colors as baseColors } from '../base/shared.tokens';
 import type { DefaultTheme } from '../themes.interfaces';
 
 import { darkTheme } from './dark.tokens';
 import { highContrastDarkTheme } from './high-contrast-dark.tokens';
 import { highContrastTheme } from './high-contrast.tokens';
 import { lightTheme } from './light.tokens';
-import { fontSizes, colors, components } from './shared.tokens';
+import { global, components } from './shared.tokens';
 
 export const defaultTheme: DefaultTheme = {
   ...baseDefaultTheme,
@@ -114,14 +115,14 @@ export const defaultTheme: DefaultTheme = {
           minHeight: 'var(--ion-scaling-xs)',
 
           font: {
-            size: `${((fontSizes.chipBase - 2) / fontSizes.root).toFixed(2)}rem`,
+            size: `${((components.chip.font.size - 2) / global.root).toFixed(2)}rem`,
           },
         },
         large: {
           minHeight: 'var(--ion-scaling-md)',
 
           font: {
-            size: `${(fontSizes.chipBase / fontSizes.root).toFixed(2)}rem`,
+            size: `${(components.chip.font.size / global.root).toFixed(2)}rem`,
           },
         },
       },
@@ -349,7 +350,7 @@ export const defaultTheme: DefaultTheme = {
         color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.54),
 
         font: {
-          size: `${(20 / fontSizes.chipBase).toFixed(2)}em`,
+          size: `${(20 / components.chip.font.size).toFixed(2)}em`,
         },
 
         leading: {
@@ -373,8 +374,8 @@ export const defaultTheme: DefaultTheme = {
 
       // Targets `ion-avatar`
       avatar: {
-        height: `${(24 / fontSizes.chipBase).toFixed(2)}em`,
-        width: `${(24 / fontSizes.chipBase).toFixed(2)}em`,
+        height: `${(24 / components.chip.font.size).toFixed(2)}em`,
+        width: `${(24 / components.chip.font.size).toFixed(2)}em`,
 
         leading: {
           margin: {
@@ -397,8 +398,8 @@ export const defaultTheme: DefaultTheme = {
     },
 
     IonItemDivider: {
-      background: `var(--ion-background-color, ${colors.white})`,
-      color: `var(--ion-text-color-step-600, ${mix(colors.white, colors.black, '40%')})`,
+      background: baseColors.backgroundColor,
+      color: `var(--ion-text-color-step-600, ${mix(baseColors.white, baseColors.black, '40%')})`,
       minHeight: 'var(--ion-scaling-750)',
       zIndex: 100,
 
@@ -423,7 +424,7 @@ export const defaultTheme: DefaultTheme = {
       },
 
       font: {
-        size: dynamicFont(fontSizes.itemDividerBase),
+        size: dynamicFont(components.itemDivider.font.size),
       },
 
       leading: {
@@ -465,7 +466,7 @@ export const defaultTheme: DefaultTheme = {
            * font size in pixels.
            * e.g. 24px / 14px = 1.7142857143em
            */
-          size: `${components.item.icon.slot.font.size / fontSizes.itemDividerBase}em`,
+          size: `${components.item.icon.slot.font.size / components.itemDivider.font.size}em`,
         },
 
         leading: {
diff --git a/core/src/themes/md/shared.tokens.ts b/core/src/themes/md/shared.tokens.ts
index 97b59d749c..dc8361e91a 100644
--- a/core/src/themes/md/shared.tokens.ts
+++ b/core/src/themes/md/shared.tokens.ts
@@ -5,34 +5,19 @@
 
 import { mix, rgba } from '../../utils/theme';
 import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
+import { colors as baseColors } from '../base/shared.tokens';
 
-const hexColors = {
-  white: '#ffffff',
-  black: '#000000',
-};
-
-const rgbColors = {
-  white: '255, 255, 255',
-  black: '0, 0, 0',
-};
-
-export const colors = {
-  ...hexColors,
-
-  backgroundColor: `var(--ion-background-color, ${hexColors.white})`,
-  backgroundColorRgb: `var(--ion-background-color-rgb, ${rgbColors.white})`,
-
-  textColor: `var(--ion-text-color, ${hexColors.black})`,
-  textColorRgb: `var(--ion-text-color-rgb, ${rgbColors.black})`,
-};
-
-export const fontSizes = {
-  chipBase: 14,
+export const global = {
   root: parseFloat(baseDefaultTheme.fontSize!.root as string),
-  itemDividerBase: 14,
 };
 
 export const components = {
+  chip: {
+    font: {
+      size: 14,
+    },
+  },
+
   item: {
     padding: {
       start: 'var(--ion-spacing-lg)',
@@ -46,7 +31,7 @@ export const components = {
 
     border: {
       color: `var(--ion-item-border-color, var(--ion-border-color, var(--ion-background-color-step-150, ${rgba(
-        '0, 0, 0',
+        baseColors.textColorRgb,
         0.13
       )})))`,
     },
@@ -71,7 +56,7 @@ export const components = {
 
     icon: {
       slot: {
-        color: rgba(colors.textColorRgb, 0.54),
+        color: rgba(baseColors.textColorRgb, 0.54),
 
         font: {
           size: 24,
@@ -156,7 +141,13 @@ export const components = {
     },
 
     paragraph: {
-      color: `var(--ion-text-color-400, ${mix(colors.white, colors.black, '40%')})`,
+      color: `var(--ion-text-color-400, ${mix(baseColors.white, baseColors.black, '40%')})`,
     },
   },
+
+  itemDivider: {
+    font: {
+      size: 14,
+    }
+  }
 };