refactor(themes): update ionic theme to define semantic tokens

Author: brandyscarney

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

@@ -22,97 +22,58 @@ export const defaultTheme: DefaultTheme = {
   fontFamily: 'initial',
 
   spacing: {
-    0: '0px',
-    50: '2px',
-    100: '4px',
-    150: '6px',
-    200: '8px',
-    250: '10px',
-    300: '12px',
-    350: '14px',
-    400: '16px',
-    450: '18px',
-    500: '20px',
-    550: '22px',
-    600: '24px',
-    650: '26px',
-    700: '28px',
-    750: '30px',
-    800: '32px',
-    850: '34px',
-    900: '36px',
-    950: '38px',
-    1000: '40px',
-    1050: '42px',
-    1100: '44px',
-    1150: '46px',
-    1200: '48px',
+    xxxxs: 'var(--ion-spacing-25)',
+    xxxs: 'var(--ion-spacing-50)',
+    xxs: 'var(--ion-spacing-100)',
+    xs: 'var(--ion-spacing-150)',
+    sm: 'var(--ion-spacing-200)',
+    md: 'var(--ion-spacing-300)',
+    lg: 'var(--ion-spacing-400)',
+    xl: 'var(--ion-spacing-500)',
+    xxl: 'var(--ion-spacing-600)',
+    xxxl: 'var(--ion-spacing-700)',
+    xxxxl: 'var(--ion-spacing-800)',
   },
 
   scaling: {
-    0: '0px',
-    25: '1px',
-    50: '2px',
-    75: '3px',
-    100: '4px',
-    150: '6px',
-    200: '8px',
-    250: '10px',
-    300: '12px',
-    350: '14px',
-    400: '16px',
-    450: '18px',
-    500: '20px',
-    550: '22px',
-    600: '24px',
-    650: '26px',
-    700: '28px',
-    750: '30px',
-    800: '32px',
-    850: '34px',
-    900: '36px',
-    950: '38px',
-    1000: '40px',
-    1050: '42px',
-    1100: '44px',
-    1150: '46px',
-    1200: '48px',
-    1400: '56px',
-    1600: '64px',
-    1800: '72px',
-    2000: '80px',
-    2400: '96px',
-    2800: '112px',
-    3200: '128px',
-    3400: '136px',
-    3600: '144px',
-    4000: '160px',
-    5000: '200px',
-    6200: '248px',
-    7400: '296px',
-    9000: '360px',
+    xxxxs: 'var(--ion-spacing-300)',
+    xxxs: 'var(--ion-spacing-400)',
+    xxs: 'var(--ion-spacing-500)',
+    xs: 'var(--ion-spacing-600)',
+    sm: 'var(--ion-spacing-700)',
+    md: 'var(--ion-spacing-800)',
+    lg: 'var(--ion-spacing-1000)',
+    xl: 'var(--ion-spacing-1200)',
+    xxl: 'var(--ion-spacing-1400)',
+    xxxl: 'var(--ion-spacing-1800)',
+    xxxxl: 'var(--ion-spacing-2000)',
   },
 
-  radii: {
-    0: '0px',
-    25: '2px',
-    100: '4px',
-    200: '8px',
-    300: '12px',
-    400: '16px',
-    500: '20px',
-    800: '32px',
-    1000: '40px',
-    full: '999px',
+  borderWidth: {
+    xxxxs: 'var(--ion-border-width-0)',
+    xxxs: 'var(--ion-border-width-25)',
+    xxs: 'var(--ion-border-width-50)',
+    xs: 'var(--ion-border-width-75)',
+    sm: 'var(--ion-border-width-100)',
+    md: 'var(--ion-border-width-150)',
+    lg: 'var(--ion-border-width-200)',
+    xl: 'var(--ion-border-width-250)',
+    xxl: 'var(--ion-border-width-300)',
+    xxxl: 'var(--ion-border-width-350)',
+    xxxxl: 'var(--ion-border-width-400)',
   },
 
-  borderWidth: {
-    0: '0',
-    25: '1px',
-    50: '2px',
-    75: '3px',
-    100: '4px',
-    150: '6px',
-    200: '8px',
+  radii: {
+    xxxxs: 'var(--ion-radii-0)',
+    xxxs: 'var(--ion-radii-25)',
+    xxs: 'var(--ion-radii-50)',
+    xs: 'var(--ion-radii-75)',
+    sm: 'var(--ion-radii-100)',
+    md: 'var(--ion-radii-200)',
+    lg: 'var(--ion-radii-300)',
+    xl: 'var(--ion-radii-400)',
+    xxl: 'var(--ion-radii-500)',
+    xxxl: 'var(--ion-radii-1000)',
+    xxxxl: 'var(--ion-radii-full)',
   },
 };