// @flow import color from 'color'; import { Platform, Dimensions, PixelRatio } from 'react-native'; import { PLATFORM } from './commonColor'; const deviceHeight = Dimensions.get('window').height; const deviceWidth = Dimensions.get('window').width; const platform = Platform.OS; const platformStyle = undefined; const isIphoneX = platform === PLATFORM.IOS && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896); export default { platformStyle, platform, // Accordion accordionBorderColor: '#d3d3d3', accordionContentPadding: 10, accordionIconFontSize: 18, contentStyle: '#f5f4f5', expandedIconStyle: '#000', headerStyle: '#edebed', iconStyle: '#000', // ActionSheet elevation: 4, containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)', innerTouchableBackgroundColor: '#fff', listItemHeight: 50, listItemBorderColor: 'transparent', marginHorizontal: -15, marginLeft: 14, marginTop: 15, minHeight: 56, padding: 15, touchableTextColor: '#757575', // Android androidRipple: true, androidRippleColor: 'rgba(256, 256, 256, 0.3)', androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', buttonUppercaseAndroidText: true, // Badge badgeBg: '#ED1727', badgeColor: '#fff', badgePadding: platform === PLATFORM.IOS ? 3 : 0, // Button buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', buttonTextColor: '#fff', buttonDisabledBg: '#b5b5b5', buttonPadding: 6, buttonDefaultActiveOpacity: 0.5, buttonDefaultFlex: 1, buttonDefaultBorderRadius: 2, buttonDefaultBorderWidth: 1, get buttonPrimaryBg() { return this.brandPrimary; }, get buttonPrimaryColor() { return this.inverseTextColor; }, get buttonInfoBg() { return this.brandInfo; }, get buttonInfoColor() { return this.inverseTextColor; }, get buttonSuccessBg() { return this.brandSuccess; }, get buttonSuccessColor() { return this.inverseTextColor; }, get buttonDangerBg() { return this.brandDanger; }, get buttonDangerColor() { return this.inverseTextColor; }, get buttonWarningBg() { return this.brandWarning; }, get buttonWarningColor() { return this.inverseTextColor; }, get buttonTextSize() { return platform === PLATFORM.IOS ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; }, get buttonTextSizeLarge() { return this.fontSizeBase * 1.5; }, get buttonTextSizeSmall() { return this.fontSizeBase * 0.8; }, get borderRadiusLarge() { return this.fontSizeBase * 3.8; }, get iconSizeLarge() { return this.iconFontSize * 1.5; }, get iconSizeSmall() { return this.iconFontSize * 0.6; }, // Card cardDefaultBg: '#fff', cardBorderColor: '#ccc', cardBorderRadius: 2, cardItemPadding: platform === PLATFORM.IOS ? 10 : 12, // CheckBox CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0, CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2, CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2, CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5, CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16, CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1, CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17, checkboxBgColor: '#be1522', checkboxSize: 20, checkboxTickColor: '#fff', checkboxDefaultColor: 'transparent', checkboxTextShadowRadius: 0, // Color brandPrimary: '#be1522', brandInfo: '#62B1F6', brandSuccess: '#5cb85c', brandDanger: '#d9534f', brandWarning: '#f0ad4e', brandDark: '#000', brandLight: '#f4f4f4', // Container containerBgColor: '#fff', sideMenuBgColor: "#f2f2f2", // Date Picker datePickerFlex: 1, datePickerPadding: 10, datePickerTextColor: '#000', datePickerBg: 'transparent', // FAB fabBackgroundColor: 'blue', fabBorderRadius: 28, fabBottom: 0, fabButtonBorderRadius: 20, fabButtonHeight: 40, fabButtonLeft: 7, fabButtonMarginBottom: 10, fabContainerBottom: 20, fabDefaultPosition: 20, fabElevation: 4, fabIconColor: '#fff', fabIconSize: 24, fabShadowColor: '#000', fabShadowOffsetHeight: 2, fabShadowOffsetWidth: 0, fabShadowOpacity: 0.4, fabShadowRadius: 2, fabWidth: 56, // Font DefaultFontSize: 16, fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto', fontSizeBase: 15, get fontSizeH1() { return this.fontSizeBase * 1.8; }, get fontSizeH2() { return this.fontSizeBase * 1.6; }, get fontSizeH3() { return this.fontSizeBase * 1.4; }, // Footer footerHeight: 55, footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522', footerPaddingBottom: 0, // FooterTab tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11, activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff', sTabBarActiveTextColor: '#007aff', tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5', // Header toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522', toolbarHeight: platform === PLATFORM.IOS ? 64 : 56, toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23, toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff', searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50, toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#be1522', iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content', get statusBarColor() { return color(this.toolbarDefaultBg) .darken(0.2) .hex(); }, get darkenHeader() { return color(this.tabBgColor) .darken(0.03) .hex(); }, // Icon iconFamily: 'Ionicons', iconFontSize: platform === PLATFORM.IOS ? 30 : 28, iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24, // InputGroup inputFontSize: 17, inputBorderColor: '#D9D5DC', inputSuccessBorderColor: '#2b8339', inputErrorBorderColor: '#ed2f2f', inputHeightBase: 50, get inputColor() { return this.textColor; }, get inputColorPlaceholder() { return '#575757'; }, // Line Height buttonLineHeight: 19, lineHeightH1: 32, lineHeightH2: 27, lineHeightH3: 22, lineHeight: platform === PLATFORM.IOS ? 20 : 24, listItemSelected: '#be1522', // List listBg: 'transparent', listBorderColor: '#c9c9c9', listDividerBg: '#f4f4f4', listBtnUnderlayColor: '#DDD', listItemPadding: platform === PLATFORM.IOS ? 10 : 12, listNoteColor: '#808080', listNoteSize: 13, // Progress Bar defaultProgressColor: '#E4202D', inverseProgressColor: '#1A191B', // Radio Button radioBtnSize: platform === PLATFORM.IOS ? 25 : 23, radioSelectedColorAndroid: '#be1522', radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24, get radioColor() { return this.brandPrimary; }, // Segment segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5', segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', // Spinner defaultSpinnerColor: '#be1522', inverseSpinnerColor: '#1A191B', // Tab tabBarDisabledTextColor: '#BDBDBD', tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522', topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff', topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', // Tabs tabBgColor: '#F8F8F8', tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff", tabFontSize: 15, // Text textColor: '#000', textDisabledColor: "#c1c1c1", inverseTextColor: '#fff', noteFontSize: 14, get defaultTextColor() { return this.textColor; }, // Title titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', titleFontSize: platform === PLATFORM.IOS ? 17 : 19, subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14, subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF', titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF', // CUSTOM customMaterialIconColor: "#5d5d5d", fetchedDataSectionListErrorText: "#898989", // Calendar/Agenda agendaBackgroundColor: '#f3f3f4', agendaEmptyLine: '#dbdbdc', // PROXIWASH proxiwashFinishedColor: "rgba(54,165,22,0.31)", proxiwashReadyColor: "transparent", proxiwashRunningColor: "rgba(94,104,241,0.3)", proxiwashBrokenColor: "rgba(162,162,162,0.31)", proxiwashErrorColor: "rgba(204,7,0,0.31)", // Screens planningColor: '#d9b10a', proximoColor: '#ec5904', proxiwashColor: '#1fa5ee', menuColor: '#e91314', tutorinsaColor: '#f93943', // Other borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2, borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), contentPadding: 10, dropdownLinkColor: '#414142', inputLineHeight: 24, deviceWidth, deviceHeight, isIphoneX, inputGroupRoundedBorderRadius: 30, // iPhoneX SafeArea Inset: { portrait: { topInset: 24, leftInset: 0, rightInset: 0, bottomInset: 34 }, landscape: { topInset: 0, leftInset: 44, rightInset: 44, bottomInset: 21 } } };