Skip to content

Commit 08d45ad

Browse files
mateki0mateki0
authored
feat: custom typography (#185)
* feat: add possibility to use custom font family and font weight * docs: add new styles props to global-config docs
1 parent 583fbee commit 08d45ad

File tree

4 files changed

+33
-15
lines changed

4 files changed

+33
-15
lines changed

‎docs/docs/intro/default-variants-config/global-config.md

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -60,20 +60,24 @@ are the objects with the same properties.
6060

6161
We can set there:
6262

63-
| Name | Type | Default | Description |
64-
| ---------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
65-
| titleSize | Number | `16` | Set font size for the notification title |
66-
| titleColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification title |
67-
| descriptionSize | Number | `14` | Set font size for the notification description |
68-
| descriptionColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification description |
69-
| bgColor | String | `'#FFFFFF'` (darkMode - false) / `'#2D2D2D'` (darkMode - true) | Set background color for the notification |
70-
| borderType | `'border'` / `'accent'` / `'no-border'` | `'border'` | Set type of border for the notification ([EXAMPLES](#-border-types-examples)) |
71-
| accentColor | String | `'#00EA33'` (success type) / `'#FC6060'` (error type) / `'#8CACFF'` (warning type) / `'#FFD37D'` (info type) | Set accent color for the notification. The color of the border or the left side accent line |
72-
| borderRadius | Number | `14` | Set border radius for the notification container |
73-
| borderWidth | Number | `1` | Set border width for the notification container |
74-
| multiline | Number | `1` | Set number of visible lines for the notification description |
75-
| defaultIconType | `'color'` / `'monochromatic'` / `'no-icon'` | `'color'` | This props works only with default icons. If you set your own icon it has no effect. ([EXAMPLES](#%EF%B8%8F-default-icon-type-examples)) |
76-
| leftIconSource | ImageSourcePropType / JSX.Element | - | Set custom left icon for the notification (in png) or as custom component. For example. `require(../assets/icon.png)` / `<CustomIcon name="cross"/>` |
63+
| Name | Type | Default | Description |
64+
| ----------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
65+
| titleSize | Number | `16` | Set font size for the notification |
66+
| titleFamily | Number | `ios: 'San Francisco', android: 'Roboto'` | Set font family for the notification title |
67+
| titleWeight | Number | `600` | Set font weight for the notification title |
68+
| titleColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification title |
69+
| descriptionSize | Number | `14` | Set font size for the notification description |
70+
| descriptionFamily | Number | `ios: 'San Francisco', android: 'Roboto'` | Set font family for the notification description |
71+
| descriptionWeight | Number | `400` | Set font weight for the notification description |
72+
| descriptionColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification description |
73+
| bgColor | String | `'#FFFFFF'` (darkMode - false) / `'#2D2D2D'` (darkMode - true) | Set background color for the notification |
74+
| borderType | `'border'` / `'accent'` / `'no-border'` | `'border'` | Set type of border for the notification ([EXAMPLES](#-border-types-examples)) |
75+
| accentColor | String | `'#00EA33'` (success type) / `'#FC6060'` (error type) / `'#8CACFF'` (warning type) / `'#FFD37D'` (info type) | Set accent color for the notification. The color of the border or the left side accent line |
76+
| borderRadius | Number | `14` | Set border radius for the notification container |
77+
| borderWidth | Number | `1` | Set border width for the notification container |
78+
| multiline | Number | `1` | Set number of visible lines for the notification description |
79+
| defaultIconType | `'color'` / `'monochromatic'` / `'no-icon'` | `'color'` | This props works only with default icons. If you set your own icon it has no effect. ([EXAMPLES](#%EF%B8%8F-default-icon-type-examples)) |
80+
| leftIconSource | ImageSourcePropType / JSX.Element | - | Set custom left icon for the notification (in png) or as custom component. For example. `require(../assets/icon.png)` / `<CustomIcon name="cross"/>` |
7781

7882
##
7983

‎src/defaultConfig/components/theme.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,8 @@ export const themeBase = {
3131
lightGray: '#CACACA',
3232
shadow: '#A1A1A140',
3333
},
34+
fontWeight: {
35+
title: '600',
36+
description: '400',
37+
} as const,
3438
}

‎src/defaultConfig/stylesUtils.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,18 @@ import type { DefaultKeys, MergedNotificationStyleConfig, Theme } from './types'
66
export const getTitleStyle = (styles: MergedNotificationStyleConfig): Partial<TextStyle> => ({
77
color: styles.titleColor ? styles.titleColor : themeBase.fontColor[styles.theme],
88
fontSize: styles.titleSize ? styles.titleSize : themeBase.fontSize.headerFontSize,
9+
fontFamily: styles.titleFamily ? styles.titleFamily : undefined,
10+
fontWeight: styles.titleWeight ? styles.titleWeight : themeBase.fontWeight.title,
911
})
1012

1113
export const getDescriptionStyle = (styles: MergedNotificationStyleConfig): Partial<TextStyle> => ({
1214
color: styles.descriptionColor ? styles.descriptionColor : themeBase.fontColor[styles.theme],
1315
fontSize: styles.descriptionSize ? styles.descriptionSize : themeBase.fontSize.messageFontSize,
1416
paddingTop: themeBase.spacing.xs,
17+
fontFamily: styles.descriptionFamily ? styles.descriptionFamily : undefined,
18+
fontWeight: styles.descriptionWeight
19+
? styles.descriptionWeight
20+
: themeBase.fontWeight.description,
1521
})
1622

1723
export const constShadow = (theme: Theme, borderRadius?: number): Partial<ViewStyle> => {

‎src/defaultConfig/types.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { NotificationPosition } from '../types/config'
2-
import type { ImageSourcePropType, ImageStyle } from 'react-native'
2+
import type { ImageSourcePropType, ImageStyle, TextStyle } from 'react-native'
33
import type { Variant } from '../types'
44
import type { SuccessNotification } from './components/success'
55
import type { ErrorNotification } from './components/error'
@@ -49,6 +49,10 @@ export type NotificationStyleConfig = Partial<{
4949
leftIconSource: ImageSourcePropType | JSX.Element
5050
borderType: BorderType
5151
imageStyle: ImageStyle
52+
titleFamily: string
53+
descriptionFamily: string
54+
titleWeight: TextStyle['fontWeight']
55+
descriptionWeight: TextStyle['fontWeight']
5256
}>
5357

5458
export type StyleProps = { style?: Partial<NotificationStyleConfig> }

0 commit comments

Comments
 (0)