Skip to content

Commit

Permalink
feat: custom typography (#185)
Browse files Browse the repository at this point in the history 
* feat: add possibility to use custom font family and font weight

* docs: add new styles props to global-config docs
  • Loading branch information
@mateki0
mateki0 authored Jan 16, 2023
1 parent 583fbee commit 08d45ad
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 15 deletions.
32 changes: 18 additions & 14 deletions docs/docs/intro/default-variants-config/global-config.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,20 +60,24 @@ are the objects with the same properties.

We can set there:

| Name | Type | Default | Description |
| ---------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| titleSize | Number | `16` | Set font size for the notification title |
| titleColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification title |
| descriptionSize | Number | `14` | Set font size for the notification description |
| descriptionColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification description |
| bgColor | String | `'#FFFFFF'` (darkMode - false) / `'#2D2D2D'` (darkMode - true) | Set background color for the notification |
| borderType | `'border'` / `'accent'` / `'no-border'` | `'border'` | Set type of border for the notification ([EXAMPLES](#-border-types-examples)) |
| 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 |
| borderRadius | Number | `14` | Set border radius for the notification container |
| borderWidth | Number | `1` | Set border width for the notification container |
| multiline | Number | `1` | Set number of visible lines for the notification description |
| 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)) |
| 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"/>` |
| Name | Type | Default | Description |
| ----------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| titleSize | Number | `16` | Set font size for the notification |
| titleFamily | Number | `ios: 'San Francisco', android: 'Roboto'` | Set font family for the notification title |
| titleWeight | Number | `600` | Set font weight for the notification title |
| titleColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification title |
| descriptionSize | Number | `14` | Set font size for the notification description |
| descriptionFamily | Number | `ios: 'San Francisco', android: 'Roboto'` | Set font family for the notification description |
| descriptionWeight | Number | `400` | Set font weight for the notification description |
| descriptionColor | String | `'#505050'` (darkMode - false) / `'#FAFAFA'` (darkMode - true) | Set font color for the notification description |
| bgColor | String | `'#FFFFFF'` (darkMode - false) / `'#2D2D2D'` (darkMode - true) | Set background color for the notification |
| borderType | `'border'` / `'accent'` / `'no-border'` | `'border'` | Set type of border for the notification ([EXAMPLES](#-border-types-examples)) |
| 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 |
| borderRadius | Number | `14` | Set border radius for the notification container |
| borderWidth | Number | `1` | Set border width for the notification container |
| multiline | Number | `1` | Set number of visible lines for the notification description |
| 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)) |
| 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"/>` |

##

Expand Down
4 changes: 4 additions & 0 deletions src/defaultConfig/components/theme.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,8 @@ export const themeBase = {
lightGray: '#CACACA',
shadow: '#A1A1A140',
},
fontWeight: {
title: '600',
description: '400',
} as const,
}
6 changes: 6 additions & 0 deletions src/defaultConfig/stylesUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,18 @@ import type { DefaultKeys, MergedNotificationStyleConfig, Theme } from './types'
export const getTitleStyle = (styles: MergedNotificationStyleConfig): Partial<TextStyle> => ({
color: styles.titleColor ? styles.titleColor : themeBase.fontColor[styles.theme],
fontSize: styles.titleSize ? styles.titleSize : themeBase.fontSize.headerFontSize,
fontFamily: styles.titleFamily ? styles.titleFamily : undefined,
fontWeight: styles.titleWeight ? styles.titleWeight : themeBase.fontWeight.title,
})

export const getDescriptionStyle = (styles: MergedNotificationStyleConfig): Partial<TextStyle> => ({
color: styles.descriptionColor ? styles.descriptionColor : themeBase.fontColor[styles.theme],
fontSize: styles.descriptionSize ? styles.descriptionSize : themeBase.fontSize.messageFontSize,
paddingTop: themeBase.spacing.xs,
fontFamily: styles.descriptionFamily ? styles.descriptionFamily : undefined,
fontWeight: styles.descriptionWeight
? styles.descriptionWeight
: themeBase.fontWeight.description,
})

export const constShadow = (theme: Theme, borderRadius?: number): Partial<ViewStyle> => {
Expand Down
6 changes: 5 additions & 1 deletion src/defaultConfig/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { NotificationPosition } from '../types/config'
import type { ImageSourcePropType, ImageStyle } from 'react-native'
import type { ImageSourcePropType, ImageStyle, TextStyle } from 'react-native'
import type { Variant } from '../types'
import type { SuccessNotification } from './components/success'
import type { ErrorNotification } from './components/error'
Expand Down Expand Up @@ -49,6 +49,10 @@ export type NotificationStyleConfig = Partial<{
leftIconSource: ImageSourcePropType | JSX.Element
borderType: BorderType
imageStyle: ImageStyle
titleFamily: string
descriptionFamily: string
titleWeight: TextStyle['fontWeight']
descriptionWeight: TextStyle['fontWeight']
}>

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

0 comments on commit 08d45ad

Please sign in to comment.