feat(themes): use native colors for ionic

Author: thetaPC

core/src/themes/ionic/default.tokens.ts

@@ -1,20 +1,15 @@
-import * as colorTokens from 'outsystems-design-tokens/tokens/color scheme.json';
-import * as primitiveTokens from 'outsystems-design-tokens/tokens/primitives.json';
-import * as lightTokens from 'outsystems-design-tokens/tokens/theme/light.json';
-import * as typographyTokens from 'outsystems-design-tokens/tokens/typography.json';
-
-import { currentColor, cachedResolveOsToken } from '../../utils/theme';
+import { rgba, currentColor } from '../../utils/theme';
 import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
 import type { DefaultTheme } from '../themes.interfaces';
 
 import { darkTheme } from './dark.tokens';
 import { lightTheme } from './light.tokens';
 
-const tokenMap = {
-  colorTokens,
-  primitiveTokens,
-  lightTokens,
-  typographyTokens,
+const colors = {
+  backgroundColor: 'var(--ion-background-color, #fff)',
+  backgroundColorRgb: 'var(--ion-background-color-rgb, 255, 255, 255)',
+  textColor: 'var(--ion-text-color, #000)',
+  textColorRgb: 'var(--ion-text-color-rgb, 0, 0, 0)',
 };
 
 export const defaultTheme: DefaultTheme = {
@@ -96,26 +91,38 @@ export const defaultTheme: DefaultTheme = {
       cursor: 'auto',
 
       padding: {
-        vertical: primitiveTokens.scale['150'].$value,
-        horizontal: primitiveTokens.scale['200'].$value,
+        vertical: '6px',
+        horizontal: '8px',
       },
 
-      typography: cachedResolveOsToken(typographyTokens.body.sm.medium.$value, tokenMap),
-      lineHeight: primitiveTokens.font['line-height']['full'].$value,
-      gap: cachedResolveOsToken(primitiveTokens.space['100'].$value, tokenMap),
+      lineHeight: '20px',
+      gap: '4px',
+
+      typography: {
+        fontFamily:
+          '-apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+        fontWeight: 500,
+        lineHeight: '20px',
+        fontSize: '12px',
+        letterSpacing: '0%',
+        paragraphSpacing: 20,
+        paragraphIndent: 0,
+        textCase: 'none',
+        textDecoration: 'none',
+      },
 
       // Sizes
       size: {
         small: {
-          minHeight: primitiveTokens.scale['600'].$value,
+          minHeight: '24px',
           font: {
-            size: primitiveTokens.font['font-size']['300'].$value,
+            size: '12px',
           },
         },
         large: {
-          minHeight: primitiveTokens.scale['800'].$value,
+          minHeight: '32px',
           font: {
-            size: primitiveTokens.font['font-size']['350'].$value,
+            size: '14px',
           },
         },
       },
@@ -127,8 +134,8 @@ export const defaultTheme: DefaultTheme = {
         },
         focus: {
           ring: {
-            color: lightTokens.primitives.blue['400'].$value,
-            width: primitiveTokens.scale['050'].$value,
+            color: '#b5c0f7',
+            width: '2px',
           },
         },
       },
@@ -137,26 +144,26 @@ export const defaultTheme: DefaultTheme = {
       shape: {
         soft: {
           border: {
-            radius: primitiveTokens.scale['100'].$value,
+            radius: '4px',
           },
         },
         round: {
           border: {
-            radius: primitiveTokens.scale['400'].$value,
+            radius: '16px',
           },
         },
         rectangular: {
           border: {
-            radius: primitiveTokens.scale['0'].$value,
+            radius: '0px',
           },
         },
       },
 
       // Hues
       hue: {
         bold: {
-          bg: cachedResolveOsToken(colorTokens.bg.neutral.bold.default, tokenMap),
-          color: cachedResolveOsToken(colorTokens.bg.surface.default, tokenMap),
+          bg: rgba(colors.textColorRgb, 0.12),
+          color: rgba(colors.textColorRgb, 0.87),
 
           // Any of the semantic colors like primary, secondary, etc.
           semantic: {
@@ -166,8 +173,8 @@ export const defaultTheme: DefaultTheme = {
         },
 
         subtle: {
-          bg: cachedResolveOsToken(lightTokens.primitives.neutral['100'], tokenMap),
-          color: lightTokens.primitives.neutral['800'].$value,
+          bg: rgba(colors.textColorRgb, 0.05),
+          color: rgba(colors.textColorRgb, 0.6),
 
           semantic: {
             color: currentColor('contrast', null, true), // ADD THIS TO THE COMPONENT SCSS
@@ -181,11 +188,11 @@ export const defaultTheme: DefaultTheme = {
         outline: {
           border: {
             color: {
-              bold: cachedResolveOsToken(colorTokens.text.default, tokenMap),
-              subtle: cachedResolveOsToken(lightTokens.primitives.neutral['300'], tokenMap),
+              bold: rgba(colors.textColorRgb, 0.32),
+              subtle: rgba(colors.textColorRgb, 0.16),
             },
 
-            width: primitiveTokens.scale['025'].$value,
+            width: '1px',
           },
 
           semantic: {
@@ -200,7 +207,7 @@ export const defaultTheme: DefaultTheme = {
       },
 
       icon: {
-        size: primitiveTokens.font['font-size']['400'].$value,
+        size: '16px',
       },
     },
   },

core/src/utils/theme.ts

@@ -601,86 +601,3 @@ export function currentColor(variation: string, alpha: number | string | null =
 export function clamp(min: number | string, val: number | string, max: number | string): string {
   return `clamp(${min}, ${val}, ${max})`;
 }
-
-// Create a cache to store results
-const cache = new Map<any, any>();
-
-export const cachedResolveOsToken = (tokenPath: any, tokenMap: Record<string, any>): any => {
-  // Use the path/object as the key
-  // (Note: For objects, this caches by reference)
-  if (cache.has(tokenPath)) {
-    return cache.get(tokenPath);
-  }
-
-  // Use your existing resolveOsToken function with the global tokenMap
-  const result = resolveOsToken(tokenPath, tokenMap);
-
-  cache.set(tokenPath, result);
-  return result;
-};
-
-export const resolveOsToken = (tokenPath: any, tokenMap: Record<string, any>): any => {
-  // 1. Handle Objects (like Typography maps)
-  if (typeof tokenPath === 'object' && tokenPath !== null) {
-    // If it's a leaf-node token object, unwrap the $value immediately
-    if ('$value' in tokenPath) {
-      return resolveOsToken(tokenPath.$value, tokenMap);
-    }
-
-    // Otherwise, it's a map of multiple tokens, resolve each key
-    const resolvedObject: Record<string, any> = {};
-    for (const [key, val] of Object.entries(tokenPath)) {
-      resolvedObject[key] = resolveOsToken(val, tokenMap);
-    }
-    return resolvedObject;
-  }
-
-  // 2. Handle Reference Strings: "{category.path.item}"
-  let lookupPath = tokenPath;
-  let isPath = false;
-
-  if (typeof tokenPath === 'string' && tokenPath.startsWith('{') && tokenPath.endsWith('}')) {
-    const reference = tokenPath.slice(1, -1).trim();
-    const [refCategory, ...refPath] = reference.split('.');
-
-    let rootKey: string | null = null;
-    switch (refCategory) {
-      case 'semantics':
-        rootKey = 'colorTokens';
-        break;
-      case 'font':
-        rootKey = 'primitiveTokens';
-        break;
-      case 'primitives':
-        rootKey = 'lightTokens';
-        break;
-      case 'typography':
-        rootKey = 'typographyTokens';
-        break;
-      case 'scale':
-        rootKey = 'primitiveTokens';
-        break; // Added 'scale' based on your example
-    }
-
-    if (!rootKey) return tokenPath;
-
-    lookupPath = `${rootKey}.${refCategory}.${refPath.join('.')}`;
-    isPath = true;
-  }
-
-  // 3. ONLY run the reduce if we have confirmed this is a path to be searched
-  if (isPath) {
-    const value = lookupPath.split('.').reduce((acc: any, key: string) => {
-      if (acc && typeof acc === 'object' && key in acc) {
-        return acc[key];
-      }
-      return undefined;
-    }, tokenMap);
-
-    // Recursively resolve the result of the lookup
-    return resolveOsToken(value, tokenMap);
-  }
-
-  // 4. If it's not a path or a reference, it's a Literal Value (Hex, Font-stack, etc.)
-  return tokenPath;
-};