diff --git a/core/src/css/core.scss b/core/src/css/core.scss index 50bb6e43d26..6d118e532dd 100644 --- a/core/src/css/core.scss +++ b/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); diff --git a/core/src/themes/ios/dark.tokens.ts b/core/src/themes/ios/dark.tokens.ts index 8e7222b581a..345cdef3a51 100644 --- a/core/src/themes/ios/dark.tokens.ts +++ b/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)', + }, + }, }; diff --git a/core/src/themes/ios/default.tokens.ts b/core/src/themes/ios/default.tokens.ts index 68641be1598..266191a1cb8 100644 --- a/core/src/themes/ios/default.tokens.ts +++ b/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)', + }, };