dhre-ui-kit 0.0.38 → 0.0.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -1
- package/src/components/bottomDrawer/BottomDrawer.tsx +36 -32
- package/src/components/countryPicker/CountryPicker.tsx +141 -0
- package/src/components/countryPicker/index.ts +1 -0
- package/src/components/textInput/Textinput.tsx +87 -0
- package/src/components/textInput/index.ts +1 -0
- package/src/index.ts +4 -0
- package/src/theme/fonts.ts +39 -45
- package/src/theme/themes.ts +24 -21
- package/src/utils/appEnum.ts +81 -0
- package/src/utils/constants.ts +3 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "dhre-ui-kit",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.40",
|
|
4
4
|
"main": "src/index.ts",
|
|
5
5
|
"files": [
|
|
6
6
|
"src",
|
|
@@ -30,8 +30,10 @@
|
|
|
30
30
|
"react-native": "0.74.3",
|
|
31
31
|
"react-native-blob-util": "^0.19.11",
|
|
32
32
|
"react-native-calendars": "^1.1306.0",
|
|
33
|
+
"react-native-country-picker-modal": "^2.0.0",
|
|
33
34
|
"react-native-gesture-handler": "2.17.0",
|
|
34
35
|
"react-native-otp-verify": "^1.1.8",
|
|
36
|
+
"react-native-paper": "^5.12.5",
|
|
35
37
|
"react-native-pdf": "^6.7.5",
|
|
36
38
|
"react-native-progress": "^5.0.1",
|
|
37
39
|
"react-native-svg": "^15.4.0",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {View, Modal} from 'react-native';
|
|
2
|
+
import {View, Modal, KeyboardAvoidingView, Platform} from 'react-native';
|
|
3
3
|
import {PanGestureHandler} from 'react-native-gesture-handler';
|
|
4
4
|
import {BlurView} from '@react-native-community/blur';
|
|
5
5
|
import {BottomDrawerProps} from './BottomDrawer.interface';
|
|
@@ -41,40 +41,44 @@ const BottomDrawer: React.FC<BottomDrawerProps> = ({
|
|
|
41
41
|
visible={isModalVisible}
|
|
42
42
|
onRequestClose={toggleModal}>
|
|
43
43
|
<PanGestureHandler onGestureEvent={onSwipDown}>
|
|
44
|
-
<
|
|
45
|
-
{
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
<View style={styles.separator} />
|
|
54
|
-
<View style={styles.headerContainer}>
|
|
55
|
-
{showLeftIcon &&
|
|
56
|
-
React.cloneElement(leftIcon, {
|
|
57
|
-
width: moderateScale(24),
|
|
58
|
-
height: moderateScale(24),
|
|
59
|
-
style: styles.leftIconStyle,
|
|
60
|
-
onPress: onLeftIconPress,
|
|
61
|
-
})}
|
|
62
|
-
<CustomTypography
|
|
63
|
-
variant={titleVariant}
|
|
64
|
-
text={title}
|
|
65
|
-
style={{...styles.title, ...titleStyle}}
|
|
44
|
+
<KeyboardAvoidingView
|
|
45
|
+
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
46
|
+
style={{flex: 1}}>
|
|
47
|
+
<View style={[styles.mainContainer, style]} testID={testID}>
|
|
48
|
+
{showBlurView ? (
|
|
49
|
+
<BlurView
|
|
50
|
+
style={[styles.blurView, blurViewStyle]}
|
|
51
|
+
blurType="light"
|
|
52
|
+
blurAmount={blurAmount}
|
|
66
53
|
/>
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
54
|
+
) : null}
|
|
55
|
+
<View style={[styles.modalContainer, modalContainerStyle]}>
|
|
56
|
+
<View style={styles.separator} />
|
|
57
|
+
<View style={styles.headerContainer}>
|
|
58
|
+
{showLeftIcon &&
|
|
59
|
+
React.cloneElement(leftIcon, {
|
|
60
|
+
width: moderateScale(24),
|
|
61
|
+
height: moderateScale(24),
|
|
62
|
+
style: styles.leftIconStyle,
|
|
63
|
+
onPress: onLeftIconPress,
|
|
64
|
+
})}
|
|
65
|
+
<CustomTypography
|
|
66
|
+
variant={titleVariant}
|
|
67
|
+
text={title}
|
|
68
|
+
style={{...styles.title, ...titleStyle}}
|
|
69
|
+
/>
|
|
70
|
+
{showRightIcon &&
|
|
71
|
+
React.cloneElement(rightIcon, {
|
|
72
|
+
width: moderateScale(24),
|
|
73
|
+
height: moderateScale(24),
|
|
74
|
+
style: styles.rightIconStyle,
|
|
75
|
+
onPress: toggleModal,
|
|
76
|
+
})}
|
|
77
|
+
</View>
|
|
78
|
+
{children}
|
|
74
79
|
</View>
|
|
75
|
-
{children}
|
|
76
80
|
</View>
|
|
77
|
-
</
|
|
81
|
+
</KeyboardAvoidingView>
|
|
78
82
|
</PanGestureHandler>
|
|
79
83
|
</Modal>
|
|
80
84
|
);
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
import React, {useState} from 'react';
|
|
2
|
+
import {
|
|
3
|
+
View,
|
|
4
|
+
TextInput,
|
|
5
|
+
StyleSheet,
|
|
6
|
+
Text,
|
|
7
|
+
ViewStyle,
|
|
8
|
+
TextStyle,
|
|
9
|
+
} from 'react-native';
|
|
10
|
+
import CountryPicker, {
|
|
11
|
+
Country,
|
|
12
|
+
CountryCode,
|
|
13
|
+
} from 'react-native-country-picker-modal';
|
|
14
|
+
import {DHRE_COLORS_TEXT} from '../../theme/colors';
|
|
15
|
+
import {
|
|
16
|
+
moderateScale,
|
|
17
|
+
horizontalScale,
|
|
18
|
+
verticalScale,
|
|
19
|
+
} from '../../utils/stylehelper';
|
|
20
|
+
import CustomTypography from '../customTypography';
|
|
21
|
+
import theme from '../../theme/themes';
|
|
22
|
+
import {
|
|
23
|
+
DEFAULT_CALLING_CODE,
|
|
24
|
+
DEFAULT_COUNTRY_CODE,
|
|
25
|
+
} from '../../utils/constants';
|
|
26
|
+
|
|
27
|
+
interface MobileNumberInputProps {
|
|
28
|
+
defaultCountryCode?: CountryCode;
|
|
29
|
+
defaultCallingCode?: string;
|
|
30
|
+
placeholder: string;
|
|
31
|
+
onChangeText: (text: string) => void;
|
|
32
|
+
value: string;
|
|
33
|
+
containerStyle?: ViewStyle;
|
|
34
|
+
inputStyle?: TextStyle;
|
|
35
|
+
countryPickerStyle?: ViewStyle;
|
|
36
|
+
callingCodeStyle?: TextStyle;
|
|
37
|
+
getCountryCode: (countryCode: string) => void;
|
|
38
|
+
maxLength: number;
|
|
39
|
+
errorMessage: string;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
const CountryDropDown = ({
|
|
43
|
+
defaultCountryCode = DEFAULT_COUNTRY_CODE,
|
|
44
|
+
defaultCallingCode = DEFAULT_CALLING_CODE,
|
|
45
|
+
placeholder,
|
|
46
|
+
onChangeText,
|
|
47
|
+
value,
|
|
48
|
+
containerStyle,
|
|
49
|
+
inputStyle,
|
|
50
|
+
countryPickerStyle,
|
|
51
|
+
callingCodeStyle,
|
|
52
|
+
getCountryCode,
|
|
53
|
+
maxLength,
|
|
54
|
+
errorMessage,
|
|
55
|
+
}: MobileNumberInputProps) => {
|
|
56
|
+
const [countryCode, setCountryCode] =
|
|
57
|
+
useState<CountryCode>(defaultCountryCode);
|
|
58
|
+
const [callingCode, setCallingCode] = useState<string>(defaultCallingCode);
|
|
59
|
+
const [pickerVisible, setPickerVisible] = useState<boolean>(false);
|
|
60
|
+
|
|
61
|
+
const handleSelect = (country: Country) => {
|
|
62
|
+
setCountryCode(country.cca2);
|
|
63
|
+
setCallingCode(`+${country.callingCode[0]}`);
|
|
64
|
+
getCountryCode(`+${country.callingCode[0]}`);
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
return (
|
|
68
|
+
<>
|
|
69
|
+
<View style={[styles.container, containerStyle]}>
|
|
70
|
+
<View style={[styles.countryPickerContainer, countryPickerStyle]}>
|
|
71
|
+
<CountryPicker
|
|
72
|
+
withFilter
|
|
73
|
+
withFlag
|
|
74
|
+
countryCode={countryCode}
|
|
75
|
+
withCallingCode
|
|
76
|
+
onSelect={handleSelect}
|
|
77
|
+
visible={pickerVisible}
|
|
78
|
+
/>
|
|
79
|
+
<Text
|
|
80
|
+
onPress={() => setPickerVisible(true)}
|
|
81
|
+
style={[styles.callingCode, callingCodeStyle]}>
|
|
82
|
+
{callingCode}
|
|
83
|
+
</Text>
|
|
84
|
+
</View>
|
|
85
|
+
<TextInput
|
|
86
|
+
style={[styles.input, inputStyle]}
|
|
87
|
+
placeholder={placeholder}
|
|
88
|
+
keyboardType="phone-pad"
|
|
89
|
+
value={value}
|
|
90
|
+
onChangeText={onChangeText}
|
|
91
|
+
maxLength={maxLength}
|
|
92
|
+
placeholderTextColor={theme.CONTENT_SECONDRY['light']}
|
|
93
|
+
/>
|
|
94
|
+
</View>
|
|
95
|
+
{errorMessage ? (
|
|
96
|
+
<CustomTypography
|
|
97
|
+
variant={'L2_REGULAR'}
|
|
98
|
+
text={errorMessage ?? ''}
|
|
99
|
+
style={{
|
|
100
|
+
...styles.errorStyle,
|
|
101
|
+
color: '#EB0542', // need to check with BA
|
|
102
|
+
}}
|
|
103
|
+
/>
|
|
104
|
+
) : null}
|
|
105
|
+
</>
|
|
106
|
+
);
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
const styles = StyleSheet.create({
|
|
110
|
+
container: {
|
|
111
|
+
flexDirection: 'row',
|
|
112
|
+
alignItems: 'center',
|
|
113
|
+
borderColor: DHRE_COLORS_TEXT.DH_BLACK,
|
|
114
|
+
borderWidth: 1,
|
|
115
|
+
borderRadius: moderateScale(8),
|
|
116
|
+
paddingHorizontal: horizontalScale(10),
|
|
117
|
+
paddingVertical: verticalScale(8),
|
|
118
|
+
marginTop: verticalScale(20),
|
|
119
|
+
},
|
|
120
|
+
countryPickerContainer: {
|
|
121
|
+
flexDirection: 'row',
|
|
122
|
+
alignItems: 'center',
|
|
123
|
+
marginRight: horizontalScale(10),
|
|
124
|
+
},
|
|
125
|
+
callingCode: {
|
|
126
|
+
fontSize: moderateScale(16),
|
|
127
|
+
color: DHRE_COLORS_TEXT.DH_BLACK,
|
|
128
|
+
},
|
|
129
|
+
input: {
|
|
130
|
+
flex: 1,
|
|
131
|
+
fontSize: moderateScale(16),
|
|
132
|
+
borderLeftWidth: 1,
|
|
133
|
+
borderLeftColor: DHRE_COLORS_TEXT.DH_TEXTLIGHTEST,
|
|
134
|
+
paddingLeft: horizontalScale(8),
|
|
135
|
+
},
|
|
136
|
+
errorStyle: {
|
|
137
|
+
marginTop: verticalScale(4),
|
|
138
|
+
},
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
export default CountryDropDown;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {default} from './CountryPicker';
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {StyleSheet, ViewStyle} from 'react-native';
|
|
3
|
+
import {TextInput} from 'react-native-paper';
|
|
4
|
+
import {DHRE_COLORS_TEXT} from '../../theme/colors';
|
|
5
|
+
import {verticalScale, moderateScale} from '../../utils/stylehelper';
|
|
6
|
+
import CustomTypography from '../customTypography';
|
|
7
|
+
import theme from '../../theme/themes';
|
|
8
|
+
|
|
9
|
+
interface CommonTextInputProps {
|
|
10
|
+
label: string;
|
|
11
|
+
value: string;
|
|
12
|
+
onChangeText: (text: string) => void;
|
|
13
|
+
placeholderText?: string;
|
|
14
|
+
isSecureTextEntry?: boolean;
|
|
15
|
+
activeBorderColor?: string;
|
|
16
|
+
inactiveBorderColor?: string;
|
|
17
|
+
borderRadius?: number;
|
|
18
|
+
inputStyle?: ViewStyle;
|
|
19
|
+
keyboardType?: 'default' | 'numeric' | 'email-address' | 'phone-pad';
|
|
20
|
+
maxLength?: number;
|
|
21
|
+
errorMessage?: string;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
const CommonTextInput: React.FC<CommonTextInputProps> = ({
|
|
25
|
+
label,
|
|
26
|
+
value,
|
|
27
|
+
onChangeText,
|
|
28
|
+
isSecureTextEntry = false,
|
|
29
|
+
keyboardType = 'default',
|
|
30
|
+
placeholderText,
|
|
31
|
+
activeBorderColor = theme.CONTENT_PRIMARY['light'],
|
|
32
|
+
inactiveBorderColor = theme.BORDER_PRIMARY['light'],
|
|
33
|
+
inputStyle,
|
|
34
|
+
maxLength,
|
|
35
|
+
errorMessage,
|
|
36
|
+
}) => {
|
|
37
|
+
return (
|
|
38
|
+
<>
|
|
39
|
+
<TextInput
|
|
40
|
+
mode="outlined"
|
|
41
|
+
outlineStyle={{
|
|
42
|
+
...styles.outlineStyle,
|
|
43
|
+
borderColor: value.length ? activeBorderColor : inactiveBorderColor,
|
|
44
|
+
}}
|
|
45
|
+
label={label}
|
|
46
|
+
value={value}
|
|
47
|
+
onChangeText={onChangeText}
|
|
48
|
+
secureTextEntry={isSecureTextEntry}
|
|
49
|
+
keyboardType={keyboardType}
|
|
50
|
+
theme={{colors: {primary: DHRE_COLORS_TEXT.DH_BLACK}}}
|
|
51
|
+
style={[errorMessage ? styles.errorInput : styles.input, inputStyle]}
|
|
52
|
+
maxLength={maxLength}
|
|
53
|
+
placeholder={placeholderText}
|
|
54
|
+
/>
|
|
55
|
+
{errorMessage ? (
|
|
56
|
+
<CustomTypography
|
|
57
|
+
variant={'L2_REGULAR'}
|
|
58
|
+
text={errorMessage ?? ''}
|
|
59
|
+
style={{
|
|
60
|
+
...styles.errorStyle,
|
|
61
|
+
color: '#EB0542', // need to check with BA
|
|
62
|
+
}}
|
|
63
|
+
/>
|
|
64
|
+
) : null}
|
|
65
|
+
</>
|
|
66
|
+
);
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
const styles = StyleSheet.create({
|
|
70
|
+
input: {
|
|
71
|
+
marginVertical: verticalScale(12),
|
|
72
|
+
backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
|
|
73
|
+
},
|
|
74
|
+
errorInput: {
|
|
75
|
+
marginTop: verticalScale(12),
|
|
76
|
+
backgroundColor: DHRE_COLORS_TEXT.DH_WHITE,
|
|
77
|
+
},
|
|
78
|
+
outlineStyle: {
|
|
79
|
+
borderWidth: 1,
|
|
80
|
+
borderRadius: moderateScale(8),
|
|
81
|
+
},
|
|
82
|
+
errorStyle: {
|
|
83
|
+
marginTop: verticalScale(4),
|
|
84
|
+
},
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
export default CommonTextInput;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {default} from './Textinput';
|
package/src/index.ts
CHANGED
|
@@ -33,8 +33,12 @@ export {default as OurOfficesButton} from './components/OutOfOffice';
|
|
|
33
33
|
export {default as NotificationBandge} from './components/notificationBandge';
|
|
34
34
|
export {default as Category} from './components/scrollList';
|
|
35
35
|
export {default as FeedbackForm} from './components/feedback';
|
|
36
|
+
export {default as CountryPicker} from './components/countryPicker';
|
|
37
|
+
export {default as TextInput} from './components/textInput';
|
|
36
38
|
|
|
37
39
|
export {FONT_STYLES} from './theme/fonts';
|
|
40
|
+
export {FontStyleKey, ThemeKeys} from './utils/appEnum';
|
|
41
|
+
|
|
38
42
|
export {DHRE_DEFAULT, DHRE_COLORS_TEXT} from './theme/colors';
|
|
39
43
|
export {
|
|
40
44
|
verticalScale,
|
package/src/theme/fonts.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import {TextStyle} from 'react-native';
|
|
2
2
|
import {moderateScale, verticalScale} from '../utils/stylehelper';
|
|
3
|
+
import {FontStyleKey} from '../utils/appEnum';
|
|
3
4
|
|
|
4
5
|
interface FontStyles {
|
|
5
6
|
[key: string]: TextStyle;
|
|
@@ -24,55 +25,48 @@ export const serifActivFontfamily: TextStyle = {
|
|
|
24
25
|
};
|
|
25
26
|
|
|
26
27
|
export const FONT_STYLES: FontStyles = {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
H8_BOLD: createFontStyle('MeraasAktiv_Bd', 18, 25.2),
|
|
28
|
+
[FontStyleKey.H1_BOLD]: createFontStyle('MeraasAktiv_Bd', 40, 56),
|
|
29
|
+
[FontStyleKey.H2_BOLD]: createFontStyle('MeraasAktiv_Bd', 36, 50.4),
|
|
30
|
+
[FontStyleKey.H3_BOLD]: createFontStyle('MeraasAktiv_Bd', 32, 44.8),
|
|
31
|
+
[FontStyleKey.H4_BOLD]: createFontStyle('MeraasAktiv_Bd', 26, 36.4),
|
|
32
|
+
[FontStyleKey.H5_BOLD]: createFontStyle('MeraasAktiv_Bd', 24, 33.6),
|
|
33
|
+
[FontStyleKey.H6_BOLD]: createFontStyle('MeraasAktiv_Bd', 22, 30.8),
|
|
34
|
+
[FontStyleKey.H7_BOLD]: createFontStyle('MeraasAktiv_Bd', 20, 28),
|
|
35
|
+
[FontStyleKey.H8_BOLD]: createFontStyle('MeraasAktiv_Bd', 18, 25.2),
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
H8_REGULAR: createFontStyle('MeraasAktiv_Rg', 18, 25.2),
|
|
37
|
+
[FontStyleKey.H1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 40, 56),
|
|
38
|
+
[FontStyleKey.H2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 36, 50.4),
|
|
39
|
+
[FontStyleKey.H3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 32, 44.8),
|
|
40
|
+
[FontStyleKey.H4_REGULAR]: createFontStyle('MeraasAktiv_Rg', 26, 36.4),
|
|
41
|
+
[FontStyleKey.H5_REGULAR]: createFontStyle('MeraasAktiv_Rg', 24, 33.6),
|
|
42
|
+
[FontStyleKey.H6_REGULAR]: createFontStyle('MeraasAktiv_Rg', 22, 30.8),
|
|
43
|
+
[FontStyleKey.H7_REGULAR]: createFontStyle('MeraasAktiv_Rg', 20, 28),
|
|
44
|
+
[FontStyleKey.H8_REGULAR]: createFontStyle('MeraasAktiv_Rg', 18, 25.2),
|
|
46
45
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
H8_LIGHT: createFontStyle('MeraasAktiv_Lt', 18, 25.2),
|
|
46
|
+
[FontStyleKey.H1_LIGHT]: createFontStyle('MeraasAktiv_Lt', 40, 56),
|
|
47
|
+
[FontStyleKey.H2_LIGHT]: createFontStyle('MeraasAktiv_Lt', 36, 50.4),
|
|
48
|
+
[FontStyleKey.H3_LIGHT]: createFontStyle('MeraasAktiv_Lt', 32, 44.8),
|
|
49
|
+
[FontStyleKey.H4_LIGHT]: createFontStyle('MeraasAktiv_Lt', 26, 36.4),
|
|
50
|
+
[FontStyleKey.H5_LIGHT]: createFontStyle('MeraasAktiv_Lt', 24, 33.6),
|
|
51
|
+
[FontStyleKey.H6_LIGHT]: createFontStyle('MeraasAktiv_Lt', 22, 30.8),
|
|
52
|
+
[FontStyleKey.H7_LIGHT]: createFontStyle('MeraasAktiv_Lt', 20, 28),
|
|
53
|
+
[FontStyleKey.H8_LIGHT]: createFontStyle('MeraasAktiv_Lt', 18, 25.2),
|
|
56
54
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
B4_BOLD: createFontStyle('MeraasAktiv_Bd', 14, 22.4),
|
|
55
|
+
[FontStyleKey.B1_BOLD]: createFontStyle('MeraasAktiv_Bd', 20, 28),
|
|
56
|
+
[FontStyleKey.B2_BOLD]: createFontStyle('MeraasAktiv_Bd', 18, 25.2),
|
|
57
|
+
[FontStyleKey.B3_BOLD]: createFontStyle('MeraasAktiv_Bd', 16, 22.4),
|
|
58
|
+
[FontStyleKey.B4_BOLD]: createFontStyle('MeraasAktiv_Bd', 14, 22.4),
|
|
62
59
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
B4_REGULAR: createFontStyle('MeraasAktiv_Rg', 14, 22.4),
|
|
60
|
+
[FontStyleKey.B1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 20, 28),
|
|
61
|
+
[FontStyleKey.B2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 18, 25.2),
|
|
62
|
+
[FontStyleKey.B3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 16, 22.4),
|
|
63
|
+
[FontStyleKey.B4_REGULAR]: createFontStyle('MeraasAktiv_Rg', 14, 22.4),
|
|
68
64
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
L3_BOLD: createFontStyle('MeraasAktiv_Bd', 10, 14),
|
|
65
|
+
[FontStyleKey.L1_BOLD]: createFontStyle('MeraasAktiv_Bd', 14, 19.6),
|
|
66
|
+
[FontStyleKey.L2_BOLD]: createFontStyle('MeraasAktiv_Bd', 12, 16.8),
|
|
67
|
+
[FontStyleKey.L3_BOLD]: createFontStyle('MeraasAktiv_Bd', 10, 14),
|
|
73
68
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
L3_REGULAR: createFontStyle('MeraasAktiv_Rg', 10, 14),
|
|
69
|
+
[FontStyleKey.L1_REGULAR]: createFontStyle('MeraasAktiv_Rg', 14, 19.6),
|
|
70
|
+
[FontStyleKey.L2_REGULAR]: createFontStyle('MeraasAktiv_Rg', 12, 16.8),
|
|
71
|
+
[FontStyleKey.L3_REGULAR]: createFontStyle('MeraasAktiv_Rg', 10, 14),
|
|
78
72
|
};
|
package/src/theme/themes.ts
CHANGED
|
@@ -1,89 +1,92 @@
|
|
|
1
|
+
import {ThemeKeys} from '../utils/appEnum';
|
|
2
|
+
|
|
1
3
|
const theme = {
|
|
2
|
-
SURFACE_PRIMARY: {
|
|
4
|
+
[ThemeKeys.SURFACE_PRIMARY]: {
|
|
3
5
|
light: '#FFFFFF',
|
|
4
6
|
dark: '#404040',
|
|
5
7
|
},
|
|
6
|
-
SURFACE_SECONDARY: {
|
|
8
|
+
[ThemeKeys.SURFACE_SECONDARY]: {
|
|
7
9
|
light: '#F5F5F5',
|
|
8
10
|
dark: '#212121',
|
|
9
11
|
},
|
|
10
|
-
SURFACE_STATIC: {
|
|
12
|
+
[ThemeKeys.SURFACE_STATIC]: {
|
|
11
13
|
light: '#FFFFFF',
|
|
12
14
|
dark: '#FFFFFF',
|
|
13
15
|
},
|
|
14
|
-
SURFACE_BRAND_STATIC: {
|
|
16
|
+
[ThemeKeys.SURFACE_BRAND_STATIC]: {
|
|
15
17
|
light: '#D92D27',
|
|
16
18
|
dark: '#D92D27',
|
|
17
19
|
},
|
|
18
|
-
SURFACE_BRAND_TRANSPARENT_STATIC: {
|
|
20
|
+
[ThemeKeys.SURFACE_BRAND_TRANSPARENT_STATIC]: {
|
|
19
21
|
light: '#D92D3E',
|
|
20
22
|
dark: '#D92D3E',
|
|
21
23
|
},
|
|
22
|
-
SURFACE_DISABLE: {
|
|
24
|
+
[ThemeKeys.SURFACE_DISABLE]: {
|
|
23
25
|
light: '#E1E1E1',
|
|
24
26
|
dark: '#A7A7A7',
|
|
25
27
|
},
|
|
26
|
-
SURFACE_INVERTED_TRANSPARENT: {
|
|
28
|
+
[ThemeKeys.SURFACE_INVERTED_TRANSPARENT]: {
|
|
27
29
|
light: '#686868',
|
|
28
30
|
dark: '#FFFFFF',
|
|
29
31
|
},
|
|
30
32
|
|
|
31
|
-
CONTENT_PRIMARY: {
|
|
33
|
+
[ThemeKeys.CONTENT_PRIMARY]: {
|
|
32
34
|
light: '#000000',
|
|
33
35
|
dark: '#FFFFFF',
|
|
34
36
|
},
|
|
35
|
-
CONTENT_SECONDRY: {
|
|
37
|
+
[ThemeKeys.CONTENT_SECONDRY]: {
|
|
36
38
|
light: '#686868',
|
|
37
39
|
dark: '#A7A7A7',
|
|
38
40
|
},
|
|
39
|
-
CONTENT_DISABLE: {
|
|
41
|
+
[ThemeKeys.CONTENT_DISABLE]: {
|
|
40
42
|
light: '#A7A7A7',
|
|
41
43
|
dark: '#686868',
|
|
42
44
|
},
|
|
43
|
-
CONTENT_INVERTED: {
|
|
45
|
+
[ThemeKeys.CONTENT_INVERTED]: {
|
|
44
46
|
light: '#FFFFFF',
|
|
45
47
|
dark: '#000000',
|
|
46
48
|
},
|
|
47
|
-
CONTENT_STATIC: {
|
|
49
|
+
[ThemeKeys.CONTENT_STATIC]: {
|
|
48
50
|
light: '#FFFFFF',
|
|
49
51
|
dark: '#FFFFFF',
|
|
50
52
|
},
|
|
51
|
-
CONTENT_SECONDRY_STATIC: {
|
|
53
|
+
[ThemeKeys.CONTENT_SECONDRY_STATIC]: {
|
|
52
54
|
light: '#CECECE',
|
|
53
55
|
dark: '#CECECE',
|
|
54
56
|
},
|
|
55
57
|
|
|
56
|
-
BORDER_PRIMARY: {
|
|
58
|
+
[ThemeKeys.BORDER_PRIMARY]: {
|
|
57
59
|
light: '#686868',
|
|
58
60
|
dark: '#404040',
|
|
59
61
|
},
|
|
60
|
-
BORDER_SECONDRY: {
|
|
62
|
+
[ThemeKeys.BORDER_SECONDRY]: {
|
|
61
63
|
light: '#A7A7A7',
|
|
62
64
|
dark: '#686868',
|
|
63
65
|
},
|
|
64
|
-
BORDER_DISABLE: {
|
|
66
|
+
[ThemeKeys.BORDER_DISABLE]: {
|
|
65
67
|
light: '#CECECE',
|
|
66
68
|
dark: '#4F4F4F',
|
|
67
69
|
},
|
|
68
|
-
BORDER_INVERTED: {
|
|
70
|
+
[ThemeKeys.BORDER_INVERTED]: {
|
|
69
71
|
light: '#000000',
|
|
70
72
|
dark: '#FFFFFF',
|
|
71
73
|
},
|
|
72
|
-
BORDER_BRAND_STATIC: {
|
|
74
|
+
[ThemeKeys.BORDER_BRAND_STATIC]: {
|
|
73
75
|
light: '#D92D27',
|
|
74
76
|
dark: '#D92D27',
|
|
75
77
|
},
|
|
76
|
-
BORDER_BRAND_TRANSPARENT_STATIC: {
|
|
78
|
+
[ThemeKeys.BORDER_BRAND_TRANSPARENT_STATIC]: {
|
|
77
79
|
light: '#D92D3E',
|
|
78
80
|
dark: '#D92D3E',
|
|
79
81
|
},
|
|
80
|
-
BORDER_STATIC: {
|
|
82
|
+
[ThemeKeys.BORDER_STATIC]: {
|
|
81
83
|
light: '#FFFFFF',
|
|
82
84
|
dark: '#FFFFFF',
|
|
83
85
|
},
|
|
84
|
-
BORDER_SEPRATOR: {
|
|
86
|
+
[ThemeKeys.BORDER_SEPRATOR]: {
|
|
85
87
|
light: '#282828',
|
|
86
88
|
dark: '#FFFFFF',
|
|
87
89
|
},
|
|
88
90
|
};
|
|
91
|
+
|
|
89
92
|
export default theme;
|
package/src/utils/appEnum.ts
CHANGED
|
@@ -15,3 +15,84 @@ export enum ToggleTextType {
|
|
|
15
15
|
ON = 'ON',
|
|
16
16
|
OFF = 'OFF',
|
|
17
17
|
}
|
|
18
|
+
|
|
19
|
+
export enum FontStyleKey {
|
|
20
|
+
// Bold heading styles
|
|
21
|
+
H1_BOLD = 'H1_BOLD',
|
|
22
|
+
H2_BOLD = 'H2_BOLD',
|
|
23
|
+
H3_BOLD = 'H3_BOLD',
|
|
24
|
+
H4_BOLD = 'H4_BOLD',
|
|
25
|
+
H5_BOLD = 'H5_BOLD',
|
|
26
|
+
H6_BOLD = 'H6_BOLD',
|
|
27
|
+
H7_BOLD = 'H7_BOLD',
|
|
28
|
+
H8_BOLD = 'H8_BOLD',
|
|
29
|
+
|
|
30
|
+
// Regular heading styles
|
|
31
|
+
H1_REGULAR = 'H1_REGULAR',
|
|
32
|
+
H2_REGULAR = 'H2_REGULAR',
|
|
33
|
+
H3_REGULAR = 'H3_REGULAR',
|
|
34
|
+
H4_REGULAR = 'H4_REGULAR',
|
|
35
|
+
H5_REGULAR = 'H5_REGULAR',
|
|
36
|
+
H6_REGULAR = 'H6_REGULAR',
|
|
37
|
+
H7_REGULAR = 'H7_REGULAR',
|
|
38
|
+
H8_REGULAR = 'H8_REGULAR',
|
|
39
|
+
|
|
40
|
+
// Light heading styles
|
|
41
|
+
H1_LIGHT = 'H1_LIGHT',
|
|
42
|
+
H2_LIGHT = 'H2_LIGHT',
|
|
43
|
+
H3_LIGHT = 'H3_LIGHT',
|
|
44
|
+
H4_LIGHT = 'H4_LIGHT',
|
|
45
|
+
H5_LIGHT = 'H5_LIGHT',
|
|
46
|
+
H6_LIGHT = 'H6_LIGHT',
|
|
47
|
+
H7_LIGHT = 'H7_LIGHT',
|
|
48
|
+
H8_LIGHT = 'H8_LIGHT',
|
|
49
|
+
|
|
50
|
+
// Bold body styles
|
|
51
|
+
B1_BOLD = 'B1_BOLD',
|
|
52
|
+
B2_BOLD = 'B2_BOLD',
|
|
53
|
+
B3_BOLD = 'B3_BOLD',
|
|
54
|
+
B4_BOLD = 'B4_BOLD',
|
|
55
|
+
|
|
56
|
+
// Regular body styles
|
|
57
|
+
B1_REGULAR = 'B1_REGULAR',
|
|
58
|
+
B2_REGULAR = 'B2_REGULAR',
|
|
59
|
+
B3_REGULAR = 'B3_REGULAR',
|
|
60
|
+
B4_REGULAR = 'B4_REGULAR',
|
|
61
|
+
|
|
62
|
+
// Bold label styles
|
|
63
|
+
L1_BOLD = 'L1_BOLD',
|
|
64
|
+
L2_BOLD = 'L2_BOLD',
|
|
65
|
+
L3_BOLD = 'L3_BOLD',
|
|
66
|
+
|
|
67
|
+
// Regular label styles
|
|
68
|
+
L1_REGULAR = 'L1_REGULAR',
|
|
69
|
+
L2_REGULAR = 'L2_REGULAR',
|
|
70
|
+
L3_REGULAR = 'L3_REGULAR',
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// ThemeKeys.ts
|
|
74
|
+
export enum ThemeKeys {
|
|
75
|
+
SURFACE_PRIMARY = 'SURFACE_PRIMARY',
|
|
76
|
+
SURFACE_SECONDARY = 'SURFACE_SECONDARY',
|
|
77
|
+
SURFACE_STATIC = 'SURFACE_STATIC',
|
|
78
|
+
SURFACE_BRAND_STATIC = 'SURFACE_BRAND_STATIC',
|
|
79
|
+
SURFACE_BRAND_TRANSPARENT_STATIC = 'SURFACE_BRAND_TRANSPARENT_STATIC',
|
|
80
|
+
SURFACE_DISABLE = 'SURFACE_DISABLE',
|
|
81
|
+
SURFACE_INVERTED_TRANSPARENT = 'SURFACE_INVERTED_TRANSPARENT',
|
|
82
|
+
|
|
83
|
+
CONTENT_PRIMARY = 'CONTENT_PRIMARY',
|
|
84
|
+
CONTENT_SECONDRY = 'CONTENT_SECONDRY',
|
|
85
|
+
CONTENT_DISABLE = 'CONTENT_DISABLE',
|
|
86
|
+
CONTENT_INVERTED = 'CONTENT_INVERTED',
|
|
87
|
+
CONTENT_STATIC = 'CONTENT_STATIC',
|
|
88
|
+
CONTENT_SECONDRY_STATIC = 'CONTENT_SECONDRY_STATIC',
|
|
89
|
+
|
|
90
|
+
BORDER_PRIMARY = 'BORDER_PRIMARY',
|
|
91
|
+
BORDER_SECONDRY = 'BORDER_SECONDRY',
|
|
92
|
+
BORDER_DISABLE = 'BORDER_DISABLE',
|
|
93
|
+
BORDER_INVERTED = 'BORDER_INVERTED',
|
|
94
|
+
BORDER_BRAND_STATIC = 'BORDER_BRAND_STATIC',
|
|
95
|
+
BORDER_BRAND_TRANSPARENT_STATIC = 'BORDER_BRAND_TRANSPARENT_STATIC',
|
|
96
|
+
BORDER_STATIC = 'BORDER_STATIC',
|
|
97
|
+
BORDER_SEPRATOR = 'BORDER_SEPRATOR',
|
|
98
|
+
}
|