// @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.textColor; }, get buttonInfoBg() { return this.brandInfo; }, get buttonInfoColor() { return this.textColor; }, get buttonSuccessBg() { return this.brandSuccess; }, get buttonSuccessColor() { return this.textColor; }, get buttonDangerBg() { return this.brandDanger; }, get buttonDangerColor() { return this.textColor; }, get buttonWarningBg() { return this.brandWarning; }, get buttonWarningColor() { return this.textColor; }, 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: '#2A2A2A', cardBorderColor: '#1a1a1a', 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: '#222222', sideMenuBgColor: "#1c1c1c", // Date Picker datePickerFlex: 1, datePickerPadding: 10, datePickerTextColor: '#fff', 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 ? '#333333' : '#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 ? '#333333' : '#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 ? '#3f3f3f' : '#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: '#3e3e3e', listDividerBg: '#222222', listBtnUnderlayColor: '#3a3a3a', listItemPadding: platform === PLATFORM.IOS ? 10 : 12, listNoteColor: '#acacac', 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 ? '#333333' : '#be1522', topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', topTabBarBorderColor: platform === PLATFORM.IOS ? '#3f3f3f' : '#fff', topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', // Tabs tabBgColor: '#2b2b2b', tabIconColor: "#fff", tabFontSize: 15, // Text textColor: '#ebebeb', textDisabledColor: "#5b5b5b", inverseTextColor: '#000', 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: "#b3b3b3", fetchedDataSectionListErrorText: "#acacac", // Calendar/Agenda agendaBackgroundColor: '#373737', agendaEmptyLine: '#464646', // PROXIWASH proxiwashFinishedColor: "rgba(17,149,32,0.53)", proxiwashReadyColor: "transparent", proxiwashRunningColor: "rgba(29,59,175,0.65)", proxiwashBrokenColor: "#000000", proxiwashErrorColor: "rgba(213,8,0,0.57)", // Screens planningColor: '#d99e09', proximoColor: '#ec5904', proxiwashColor: '#1fa5ee', menuColor: '#b81213', 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 } } };