Archived
nikolark
112a93f55d
- Upgrade deps to make the app build again
- Rely on autolinking for android packages
- Icons where removed from native-base, so start switching to icons from
react-native-vector-icons
- Start reimplementing navigation
278 lines
6.4 KiB
JavaScript
278 lines
6.4 KiB
JavaScript
import color from 'color';
|
|
|
|
import { Platform, Dimensions, PixelRatio } from 'react-native';
|
|
|
|
const deviceHeight = Dimensions.get('window').height;
|
|
const deviceWidth = Dimensions.get('window').width;
|
|
const platform = Platform.OS;
|
|
const platformStyle = undefined;
|
|
|
|
export default {
|
|
platformStyle,
|
|
platform,
|
|
// AndroidRipple
|
|
androidRipple: true,
|
|
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
|
|
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
|
|
|
|
// Badge
|
|
badgeBg: '#ED1727',
|
|
badgeColor: '#fff',
|
|
// New Variable
|
|
badgePadding: platform === 'ios' ? 3 : 0,
|
|
|
|
// Button
|
|
btnFontFamily: platform === 'ios' ? 'System' : 'Roboto_medium',
|
|
btnDisabledBg: '#b5b5b5',
|
|
btnDisabledClr: '#f1f1f1',
|
|
|
|
// CheckBox
|
|
CheckboxRadius: platform === 'ios' ? 13 : 0,
|
|
CheckboxBorderWidth: platform === 'ios' ? 1 : 2,
|
|
CheckboxPaddingLeft: platform === 'ios' ? 4 : 2,
|
|
CheckboxPaddingBottom: platform === 'ios' ? 0 : 5,
|
|
CheckboxIconSize: platform === 'ios' ? 21 : 14,
|
|
CheckboxIconMarginTop: platform === 'ios' ? undefined : 1,
|
|
CheckboxFontSize: platform === 'ios' ? 23 / 0.9 : 18,
|
|
DefaultFontSize: 17,
|
|
checkboxBgColor: '#039BE5',
|
|
checkboxSize: 20,
|
|
checkboxTickColor: '#fff',
|
|
|
|
// Segment
|
|
segmentBackgroundColor: '#3F51B5',
|
|
segmentActiveBackgroundColor: '#fff',
|
|
segmentTextColor: '#fff',
|
|
segmentActiveTextColor: '#3F51B5',
|
|
segmentBorderColor: '#fff',
|
|
segmentBorderColorMain: '#3F51B5',
|
|
|
|
// New Variable
|
|
get defaultTextColor() {
|
|
return this.textColor;
|
|
},
|
|
|
|
get btnPrimaryBg() {
|
|
return this.brandPrimary;
|
|
},
|
|
get btnPrimaryColor() {
|
|
return this.inverseTextColor;
|
|
},
|
|
get btnInfoBg() {
|
|
return this.brandInfo;
|
|
},
|
|
get btnInfoColor() {
|
|
return this.inverseTextColor;
|
|
},
|
|
get btnSuccessBg() {
|
|
return this.brandSuccess;
|
|
},
|
|
get btnSuccessColor() {
|
|
return this.inverseTextColor;
|
|
},
|
|
get btnDangerBg() {
|
|
return this.brandDanger;
|
|
},
|
|
get btnDangerColor() {
|
|
return this.inverseTextColor;
|
|
},
|
|
get btnWarningBg() {
|
|
return this.brandWarning;
|
|
},
|
|
get btnWarningColor() {
|
|
return this.inverseTextColor;
|
|
},
|
|
get btnTextSize() {
|
|
return platform === 'ios' ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
|
|
},
|
|
get btnTextSizeLarge() {
|
|
return this.fontSizeBase * 1.5;
|
|
},
|
|
get btnTextSizeSmall() {
|
|
return this.fontSizeBase * 0.8;
|
|
},
|
|
get borderRadiusLarge() {
|
|
return this.fontSizeBase * 3.8;
|
|
},
|
|
|
|
buttonPadding: 6,
|
|
|
|
get iconSizeLarge() {
|
|
return this.iconFontSize * 1.5;
|
|
},
|
|
get iconSizeSmall() {
|
|
return this.iconFontSize * 0.6;
|
|
},
|
|
|
|
// Card
|
|
cardDefaultBg: '#fff',
|
|
|
|
// Color
|
|
brandPrimary: '#0277bd',
|
|
brandInfo: '#62B1F6',
|
|
brandSuccess: '#5cb85c',
|
|
brandDanger: '#d9534f',
|
|
brandWarning: '#f0ad4e',
|
|
brandSidebar: '#252932',
|
|
|
|
// Font
|
|
fontFamily: 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: '#2874F0',
|
|
|
|
// FooterTab
|
|
tabBarTextColor: '#8bb3f4',
|
|
tabBarTextSize: platform === 'ios' ? 14 : 11,
|
|
activeTab: platform === 'ios' ? '#007aff' : '#fff',
|
|
sTabBarActiveTextColor: '#007aff',
|
|
tabBarActiveTextColor: '#fff',
|
|
tabActiveBgColor: platform === 'ios' ? '#1569f4' : undefined,
|
|
|
|
// Tab
|
|
tabDefaultBg: '#2874F0',
|
|
topTabBarTextColor: '#b3c7f9',
|
|
topTabBarActiveTextColor: '#fff',
|
|
topTabActiveBgColor: platform === 'ios' ? '#1569f4' : undefined,
|
|
topTabBarBorderColor: '#fff',
|
|
topTabBarActiveBorderColor: '#fff',
|
|
|
|
// Header
|
|
toolbarBtnColor: '#fff',
|
|
toolbarDefaultBg: '#2874F0',
|
|
toolbarHeight: platform === 'ios' ? 64 : 56,
|
|
toolbarIconSize: platform === 'ios' ? 20 : 22,
|
|
toolbarSearchIconSize: platform === 'ios' ? 20 : 23,
|
|
toolbarInputColor: platform === 'ios' ? '#CECDD2' : '#fff',
|
|
searchBarHeight: platform === 'ios' ? 30 : 40,
|
|
toolbarInverseBg: '#222',
|
|
toolbarTextColor: '#fff',
|
|
iosStatusbar: 'light-content',
|
|
toolbarDefaultBorder: '#2874F0',
|
|
get statusBarColor() {
|
|
return color(this.toolbarDefaultBg).darken(0.2).hex();
|
|
},
|
|
|
|
// Icon
|
|
iconFamily: 'Ionicons',
|
|
iconFontSize: platform === 'ios' ? 30 : 28,
|
|
iconMargin: 7,
|
|
iconHeaderSize: platform === 'ios' ? 33 : 24,
|
|
|
|
// InputGroup
|
|
inputFontSize: 17,
|
|
inputBorderColor: '#D9D5DC',
|
|
inputSuccessBorderColor: '#2b8339',
|
|
inputErrorBorderColor: '#ed2f2f',
|
|
|
|
get inputColor() {
|
|
return this.textColor;
|
|
},
|
|
get inputColorPlaceholder() {
|
|
return '#575757';
|
|
},
|
|
|
|
inputGroupMarginBottom: 10,
|
|
inputHeightBase: 50,
|
|
inputPaddingLeft: 5,
|
|
|
|
get inputPaddingLeftIcon() {
|
|
return this.inputPaddingLeft * 8;
|
|
},
|
|
|
|
// Line Height
|
|
btnLineHeight: 19,
|
|
lineHeightH1: 32,
|
|
lineHeightH2: 27,
|
|
lineHeightH3: 22,
|
|
iconLineHeight: platform === 'ios' ? 37 : 30,
|
|
lineHeight: platform === 'ios' ? 20 : 24,
|
|
|
|
// List
|
|
listBorderColor: '#c9c9c9',
|
|
listDividerBg: '#f4f4f4',
|
|
listItemHeight: 45,
|
|
listBtnUnderlayColor: '#DDD',
|
|
|
|
// Card
|
|
cardBorderColor: '#ccc',
|
|
|
|
// Changed Variable
|
|
listItemPadding: platform === 'ios' ? 10 : 12,
|
|
|
|
listNoteColor: '#808080',
|
|
listNoteSize: 13,
|
|
|
|
// Progress Bar
|
|
defaultProgressColor: '#E4202D',
|
|
inverseProgressColor: '#1A191B',
|
|
|
|
// Radio Button
|
|
radioBtnSize: platform === 'ios' ? 25 : 23,
|
|
radioSelectedColorAndroid: '#5067FF',
|
|
|
|
// New Variable
|
|
radioBtnLineHeight: platform === 'ios' ? 29 : 24,
|
|
|
|
radioColor: '#7e7e7e',
|
|
|
|
get radioSelectedColor() {
|
|
return color(this.radioColor).darken(0.2).hex();
|
|
},
|
|
|
|
// Spinner
|
|
defaultSpinnerColor: '#45D56E',
|
|
inverseSpinnerColor: '#1A191B',
|
|
|
|
// Tabs
|
|
tabBgColor: '#F8F8F8',
|
|
tabFontSize: 15,
|
|
tabTextColor: '#222222',
|
|
|
|
// Text
|
|
textColor: '#000',
|
|
inverseTextColor: '#fff',
|
|
noteFontSize: 14,
|
|
|
|
// Title
|
|
titleFontfamily: platform === 'ios' ? 'System' : 'Roboto_medium',
|
|
titleFontSize: platform === 'ios' ? 17 : 19,
|
|
subTitleFontSize: platform === 'ios' ? 12 : 14,
|
|
subtitleColor: '#FFF',
|
|
|
|
// New Variable
|
|
titleFontColor: '#FFF',
|
|
|
|
// Other
|
|
borderRadiusBase: platform === 'ios' ? 5 : 2,
|
|
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
|
contentPadding: 10,
|
|
|
|
get darkenHeader() {
|
|
return color(this.tabBgColor).darken(0.03).hex();
|
|
},
|
|
|
|
dropdownBg: '#000',
|
|
dropdownLinkColor: '#414142',
|
|
inputLineHeight: 24,
|
|
jumbotronBg: '#C9C9CE',
|
|
jumbotronPadding: 30,
|
|
deviceWidth,
|
|
deviceHeight,
|
|
|
|
// New Variable
|
|
inputGroupRoundedBorderRadius: 30,
|
|
};
|