feat(themes): add ios theme tokens (#30736)

Adds and defines the `ios` theme tokens. Removes the duplicated `--ion-font-family` assignment.

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

core/src/css/core.scss

@@ -7,11 +7,6 @@
 // Ionic Font Family
 // --------------------------------------------------
 
-// TODO(FW-6744): Remove this after adding the ios tokens
-html.ios {
-  --ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
-}
-
 body {
   background: var(--ion-background-color);
   color: var(--ion-text-color);

core/src/themes/ios/dark.tokens.ts

@@ -3,4 +3,65 @@ import type { DarkTheme } from '../themes.interfaces';
 
 export const darkTheme: DarkTheme = {
   ...baseDarkTheme,
+
+  backgroundColor: '#000000',
+  textColor: '#ffffff',
+
+  backgroundColorStep: {
+    50: '#0d0d0d',
+    100: '#1a1a1a',
+    150: '#262626',
+    200: '#333333',
+    250: '#404040',
+    300: '#4d4d4d',
+    350: '#595959',
+    400: '#666666',
+    450: '#737373',
+    500: '#808080',
+    550: '#8c8c8c',
+    600: '#999999',
+    650: '#a6a6a6',
+    700: '#b3b3b3',
+    750: '#bfbfbf',
+    800: '#cccccc',
+    850: '#d9d9d9',
+    900: '#e6e6e6',
+    950: '#f2f2f2',
+  },
+
+  textColorStep: {
+    50: '#f2f2f2',
+    100: '#e6e6e6',
+    150: '#d9d9d9',
+    200: '#cccccc',
+    250: '#bfbfbf',
+    300: '#b3b3b3',
+    350: '#a6a6a6',
+    400: '#999999',
+    450: '#8c8c8c',
+    500: '#808080',
+    550: '#737373',
+    600: '#666666',
+    650: '#595959',
+    700: '#4d4d4d',
+    750: '#404040',
+    800: '#333333',
+    850: '#262626',
+    900: '#1a1a1a',
+    950: '#0d0d0d',
+  },
+
+  components: {
+    IonCard: {
+      background: '#1c1c1d',
+    },
+    IonItem: {
+      background: '#000000',
+    },
+    IonModal: {
+      background: 'var(--ion-background-color-step-100)',
+      toolbarBackground: 'var(--ion-background-color-step-150)',
+      toolbarBorderColor: 'var(--ion-background-color-step-250)',
+    },
+  },
 };

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

@@ -13,4 +13,62 @@ export const defaultTheme: DefaultTheme = {
     light: lightTheme,
     dark: darkTheme,
   },
+
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif',
+
+  spacing: {
+    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: {
+    xxxxs: 'var(--ion-scaling-200)',
+    xxxs: 'var(--ion-scaling-350)',
+    xxs: 'var(--ion-scaling-500)',
+    xs: 'var(--ion-scaling-600)',
+    sm: 'var(--ion-scaling-700)',
+    md: 'var(--ion-scaling-800)',
+    lg: 'var(--ion-scaling-900)',
+    xl: 'var(--ion-scaling-1000)',
+    xxl: 'var(--ion-scaling-1100)',
+    xxxl: 'var(--ion-scaling-1200)',
+    xxxxl: 'var(--ion-scaling-1600)',
+  },
+
+  borderWidth: {
+    xxxxs: 'var(--ion-border-width-0)',
+    xxxs: 'var(--ion-border-width-hairline)',
+    xxs: 'var(--ion-border-width-25)',
+    xs: 'var(--ion-border-width-50)',
+    sm: 'var(--ion-border-width-75)',
+    md: 'var(--ion-border-width-100)',
+    lg: 'var(--ion-border-width-150)',
+    xl: 'var(--ion-border-width-200)',
+    xxl: 'var(--ion-border-width-250)',
+    xxxl: 'var(--ion-border-width-300)',
+    xxxxl: 'var(--ion-border-width-350)',
+  },
+
+  radii: {
+    xxxxs: 'var(--ion-radii-0)',
+    xxxs: 'var(--ion-radii-50)',
+    xxs: 'var(--ion-radii-100)',
+    xs: 'var(--ion-radii-150)',
+    sm: 'var(--ion-radii-200)',
+    md: 'var(--ion-radii-250)',
+    lg: 'var(--ion-radii-300)',
+    xl: 'var(--ion-radii-350)',
+    xxl: 'var(--ion-radii-400)',
+    xxxl: 'var(--ion-radii-500)',
+    xxxxl: 'var(--ion-radii-full)',
+  },
 };