feat(themes): add md theme tokens and config values

Author: brandyscarney

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

@@ -3,4 +3,68 @@ import type { DarkTheme } from '../themes.interfaces';
 
 export const darkTheme: DarkTheme = {
   ...baseDarkTheme,
+
+  backgroundColor: '#121212',
+  backgroundColorRgb: '18, 18, 18',
+  textColor: '#ffffff',
+  textColorRgb: '255, 255, 255',
+
+  backgroundColorStep: {
+    50: '#1e1e1e',
+    100: '#2a2a2a',
+    150: '#363636',
+    200: '#414141',
+    250: '#4d4d4d',
+    300: '#595959',
+    350: '#656565',
+    400: '#717171',
+    450: '#7d7d7d',
+    500: '#898989',
+    550: '#949494',
+    600: '#a0a0a0',
+    650: '#acacac',
+    700: '#b8b8b8',
+    750: '#c4c4c4',
+    800: '#d0d0d0',
+    850: '#dbdbdb',
+    900: '#e7e7e7',
+    950: '#f3f3f3',
+  },
+
+  textColorStep: {
+    50: '#f33f33',
+    100: '#e7e7e7',
+    150: '#dbdbdb',
+    200: '#d0d0d0',
+    250: '#c4c4c4',
+    300: '#b8b8b8',
+    350: '#acacac',
+    400: '#a0a0a0',
+    450: '#949494',
+    500: '#898989',
+    550: '#7d7d7d',
+    600: '#717171',
+    650: '#656565',
+    700: '#595959',
+    750: '#4d4d4d',
+    800: '#414141',
+    850: '#363636',
+    900: '#2a2a2a',
+    950: '#1e1e1e',
+  },
+
+  components: {
+    IonCard: {
+      background: '#1e1e1e',
+    },
+    IonItem: {
+      background: '#1e1e1e',
+    },
+    IonToolbar: {
+      background: '#1f1f1f',
+    },
+    IonTabBar: {
+      background: '#1f1f1f',
+    },
+  },
 };

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

@@ -14,5 +14,66 @@ export const defaultTheme: DefaultTheme = {
     dark: darkTheme,
   },
 
+  config: {
+    formHighlight: true,
+    rippleEffect: true,
+  },
+
   fontFamily: '"Roboto", "Helvetica Neue", 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-300)',
+    xxxs: 'var(--ion-scaling-400)',
+    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-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)',
+  },
+
+  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-700)',
+    xxxl: 'var(--ion-radii-900)',
+    xxxxl: 'var(--ion-radii-full)',
+  },
 };