From 37b82e107b14fb041f0a2ef4d2a589ea50cb3bfd Mon Sep 17 00:00:00 2001 From: Barry van Veen Date: Wed, 13 May 2026 13:59:17 +0200 Subject: [PATCH 1/3] Get font sizes from theme to account for overrides --- src/components/InputField.tsx | 6 +++--- src/components/Notification.tsx | 3 +-- src/components/ProgressBarList.tsx | 7 +++---- 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx index 0f8f240..cd2ee65 100644 --- a/src/components/InputField.tsx +++ b/src/components/InputField.tsx @@ -3,7 +3,7 @@ import { Platform, StyleProp, StyleSheet, Text, TextInput, TextInputProps, View, import { Icon } from './Icon' import IconText from './IconText' -import { font, layout, rounded } from '../styles' +import { layout, rounded } from '../styles' import { Theme, createInputStyles, useStyles, useTheme } from '../theme' type Props = { @@ -128,11 +128,11 @@ const createStyles = (theme: Theme) => { justifyContent: 'center', }, errorStyle: { - ...font.small, + ...theme.font.small, color: theme.color.text.system.error, }, descriptionStyle: { - ...font.small, + ...theme.font.small, color: theme.color.text.system.subtle, }, }) diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx index c53c618..68dbdea 100644 --- a/src/components/Notification.tsx +++ b/src/components/Notification.tsx @@ -1,7 +1,6 @@ import React from 'react' import { StyleProp, Text, View, ViewStyle } from 'react-native' -import { font } from '../styles' import { useTheme } from '../theme/ThemeProvider' type Props = { @@ -27,7 +26,7 @@ const Notification = ({ count, style }: Props) => { > {count} diff --git a/src/components/ProgressBarList.tsx b/src/components/ProgressBarList.tsx index 3a4ebb4..7fc40e3 100644 --- a/src/components/ProgressBarList.tsx +++ b/src/components/ProgressBarList.tsx @@ -3,7 +3,6 @@ import { StyleSheet, Text, View } from 'react-native' import { Icon } from './Icon' import ProgressBar from '../data/ProgressBar' -import { font } from '../styles' import { Theme, useStyles, useTheme } from '../theme' type Props = { @@ -127,7 +126,7 @@ const createStyles = (theme: Theme) => paddingLeft: borderRadius, }, label: { - ...font.small, + ...theme.font.small, color: theme.overlay.white70, justifyContent: 'center', lineHeight: barHeight, @@ -150,12 +149,12 @@ const createStyles = (theme: Theme) => paddingRight: borderRadius, }, denominator: { - ...font.small, + ...theme.font.small, color: theme.overlay.white70, lineHeight: barHeight, }, numerator: { - ...font.smallBold, + ...theme.font.smallBold, color: theme.color.text.system.staticWhite, lineHeight: barHeight, }, From e9ecd94171cedfbe6e36adadcd2290a90ef82d87 Mon Sep 17 00:00:00 2001 From: Barry van Veen Date: Tue, 26 May 2026 08:50:33 +0200 Subject: [PATCH 2/3] Bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 42d6461..de9d87b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@observation.org/react-native-components", - "version": "1.77.0", + "version": "1.78.0", "main": "src/index.ts", "exports": { ".": "./src/index.ts", From 42511d97d7d79b9df0ba621081ac9b369e2d19a1 Mon Sep 17 00:00:00 2001 From: Barry van Veen Date: Thu, 28 May 2026 08:39:55 +0200 Subject: [PATCH 3/3] Lower font size of input text --- .../__snapshots__/InputField.test.tsx.snap | 40 +++++++++---------- src/theme/tokens/text.ts | 2 +- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/components/__tests__/__snapshots__/InputField.test.tsx.snap b/src/components/__tests__/__snapshots__/InputField.test.tsx.snap index f2939e0..811a135 100644 --- a/src/components/__tests__/__snapshots__/InputField.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/InputField.test.tsx.snap @@ -52,10 +52,10 @@ exports[`InputField Rendering Disabled 1`] = ` "color": "#212121", "flex": 1, "fontFamily": "Ubuntu", - "fontSize": 16, + "fontSize": 14, "fontStyle": "normal", "fontWeight": "normal", - "lineHeight": 24, + "lineHeight": 20, "minHeight": 40, "overflow": "hidden", "paddingLeft": 8, @@ -107,10 +107,10 @@ exports[`InputField Rendering Normal 1`] = ` "color": "#212121", "flex": 1, "fontFamily": "Ubuntu", - "fontSize": 16, + "fontSize": 14, "fontStyle": "normal", "fontWeight": "normal", - "lineHeight": 24, + "lineHeight": 20, "minHeight": 40, "overflow": "hidden", "paddingLeft": 8, @@ -162,10 +162,10 @@ exports[`InputField Rendering With a description 1`] = ` "color": "#212121", "flex": 1, "fontFamily": "Ubuntu", - "fontSize": 16, + "fontSize": 14, "fontStyle": "normal", "fontWeight": "normal", - "lineHeight": 24, + "lineHeight": 20, "minHeight": 40, "overflow": "hidden", "paddingLeft": 8, @@ -254,10 +254,10 @@ exports[`InputField Rendering With a label 1`] = ` "color": "#212121", "flex": 1, "fontFamily": "Ubuntu", - "fontSize": 16, + "fontSize": 14, "fontStyle": "normal", "fontWeight": "normal", - "lineHeight": 24, + "lineHeight": 20, "minHeight": 40, "overflow": "hidden", "paddingLeft": 8, @@ -309,10 +309,10 @@ exports[`InputField Rendering With a right icon 1`] = ` "color": "#212121", "flex": 1, "fontFamily": "Ubuntu", - "fontSize": 16, + "fontSize": 14, "fontStyle": "normal", "fontWeight": "normal", - "lineHeight": 24, + "lineHeight": 20, "minHeight": 40, "overflow": "hidden", "paddingLeft": 8, @@ -382,10 +382,10 @@ exports[`InputField Rendering With an alternative TextInput component 1`] = ` "color": "#212121", "flex": 1, "fontFamily": "Ubuntu", - "fontSize": 16, + "fontSize": 14, "fontStyle": "normal", "fontWeight": "normal", - "lineHeight": 24, + "lineHeight": 20, "minHeight": 40, "overflow": "hidden", "paddingLeft": 8, @@ -457,10 +457,10 @@ exports[`InputField Rendering With an error message 1`] = ` "color": "#212121", "flex": 1, "fontFamily": "Ubuntu", - "fontSize": 16, + "fontSize": 14, "fontStyle": "normal", "fontWeight": "normal", - "lineHeight": 24, + "lineHeight": 20, "minHeight": 40, "overflow": "hidden", "paddingLeft": 8, @@ -565,10 +565,10 @@ exports[`InputField Rendering With focus 1`] = ` "color": "#212121", "flex": 1, "fontFamily": "Ubuntu", - "fontSize": 16, + "fontSize": 14, "fontStyle": "normal", "fontWeight": "normal", - "lineHeight": 24, + "lineHeight": 20, "minHeight": 40, "overflow": "hidden", "paddingLeft": 8, @@ -621,10 +621,10 @@ exports[`InputField Rendering With focus and an error message 1`] = ` "color": "#212121", "flex": 1, "fontFamily": "Ubuntu", - "fontSize": 16, + "fontSize": 14, "fontStyle": "normal", "fontWeight": "normal", - "lineHeight": 24, + "lineHeight": 20, "minHeight": 40, "overflow": "hidden", "paddingLeft": 8, @@ -677,10 +677,10 @@ exports[`InputField Rendering Without focus 1`] = ` "color": "#212121", "flex": 1, "fontFamily": "Ubuntu", - "fontSize": 16, + "fontSize": 14, "fontStyle": "normal", "fontWeight": "normal", - "lineHeight": 24, + "lineHeight": 20, "minHeight": 40, "overflow": "hidden", "paddingLeft": 8, diff --git a/src/theme/tokens/text.ts b/src/theme/tokens/text.ts index 2e3d84f..4e2892f 100644 --- a/src/theme/tokens/text.ts +++ b/src/theme/tokens/text.ts @@ -40,7 +40,7 @@ export const createTextStyles = (theme: Theme) => color: theme.color.text.system.link, }, input: { - ...theme.font.large, + ...theme.font.medium, color: theme.color.text.system.strong, }, subtitle: {