How to use the co/style/constants.fontSize.sub function in co

Tap: styled.TouchableOpacity``,
		Content: styled.View`
			flex-direction: row;
			align-items: center;
			justify-content: center;
			height: ${formElementHeight - tokenItemGap*4}px;
			padding-horizontal: ${tokenItemGap}px;
			margin-vertical: ${tokenItemGap}px;
			border-radius: 4px;
			${props => {
				if (props.active)
					return `background-color: ${props.theme.dark ? themed.invertedLight() : props.theme.tintColor || themed.tintColor()};`
			}}
		`,
		Text: styled.Text`
			font-size: ${fontSize.sub}px;
			color: ${props=>{
				if (props.active && !props.theme.dark) return 'white'
				return themed.tintColor(props)
			}};
		`,
		Clear: styled.Image`
			tint-color: #ffffff90;
			margin-left: ${tokenItemGap}px;
		`
	},
	
	EmptyArea: styled.TouchableOpacity.attrs({
		activeOpacity: 1
	})`
		flex: 1;
		align-items: flex-end;

export const Form = styled.View`
	flex: 1;
	flex-direction: row;
	border-radius: ${height}px;
	background-color: ${themed.invertedExtraLight};
`

export const Input = styled(BaseInput).attrs({
	returnKeyType: 'search',
	autoCorrect: false,
	autoCapitalize: 'none',
	includeFontPadding: false,
	enablesReturnKeyAutomatically: false
})`
	font-size: ${fontSize.sub}px;
	flex: 1;
	padding-horizontal: ${paddingHorizontal}px;
	padding-vertical: 0;
	text-align-vertical: center;
`

export const Icon = styled.Image.attrs({
	fadeDuration:0
})`
	tint-color: ${themed.tintColor};
`

export const Button = styled.TouchableOpacity`
	width: ${height-horizontalGap}px;
	align-items: center;
	justify-content: center;

`

export const CoverCheck = styled.Image`
	tint-color: ${themed.tintColor};
`


export const CoverScreenshotView = styled(CoverView)`
	border-width: ${StyleSheet.hairlineWidth};
	border-color: ${themed.invertedLight};
	align-items: center;
	justify-content: center;
`

export const CoverScreenshotText = styled.Text`
	font-size: ${fontSize.sub}px;
	color: ${themed.tintColor};
	text-align: center;
`