diff --git a/eslint.config.mjs b/eslint.config.mjs index dcf0086..38944bd 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -59,7 +59,7 @@ export default [ 'observation/no-function-without-logging': [ 'error', { - ignoreList: ['createStyles'], + ignoreList: ['createStyles', 'createTextStyles'], }, ], diff --git a/package.json b/package.json index e55bfea..ddc210f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@observation.org/react-native-components", - "version": "1.96.0", + "version": "1.97.0", "main": "src/index.ts", "exports": { ".": "./src/index.ts", diff --git a/src/components/InputPanel.tsx b/src/components/InputPanel.tsx index e94c7e5..df7e0e6 100644 --- a/src/components/InputPanel.tsx +++ b/src/components/InputPanel.tsx @@ -72,10 +72,7 @@ const createStyles = (theme: Theme) => { paddingHorizontal: theme.margin.common, }, headerTextStyle: { - ...theme.font.extraSmall, - lineHeight: theme.font.extraSmall.fontSize, - letterSpacing: 0.03 * theme.font.extraSmall.fontSize, - color: theme.color.text.system.subtler, + ...theme.text.inputPanelHeader, }, contentContainer: { flex: 1, diff --git a/src/components/__tests__/__snapshots__/InputPanel.test.tsx.snap b/src/components/__tests__/__snapshots__/InputPanel.test.tsx.snap index 04086f8..d71f7cb 100644 --- a/src/components/__tests__/__snapshots__/InputPanel.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/InputPanel.test.tsx.snap @@ -47,7 +47,7 @@ exports[`InputPanel Rendering Capitalize value 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 9, + "paddingVertical": 8, }, ] } @@ -63,7 +63,7 @@ exports[`InputPanel Rendering Capitalize value 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 10, + "lineHeight": 12, } } > @@ -153,7 +153,7 @@ exports[`InputPanel Rendering Disabled 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 9, + "paddingVertical": 8, }, ] } @@ -169,7 +169,7 @@ exports[`InputPanel Rendering Disabled 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 10, + "lineHeight": 12, } } > @@ -348,7 +348,7 @@ exports[`InputPanel Rendering No value 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 9, + "paddingVertical": 8, }, ] } @@ -364,7 +364,7 @@ exports[`InputPanel Rendering No value 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 10, + "lineHeight": 12, } } > @@ -454,7 +454,7 @@ exports[`InputPanel Rendering With content 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 9, + "paddingVertical": 8, }, ] } @@ -470,7 +470,7 @@ exports[`InputPanel Rendering With content 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 10, + "lineHeight": 12, } } > @@ -560,7 +560,7 @@ exports[`InputPanel Rendering With value style 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 9, + "paddingVertical": 8, }, ] } @@ -576,7 +576,7 @@ exports[`InputPanel Rendering With value style 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 10, + "lineHeight": 12, } } > @@ -668,7 +668,7 @@ exports[`InputPanel Rendering Without chevron 1`] = ` "flexDirection": "column", }, { - "paddingVertical": 9, + "paddingVertical": 8, }, ] } @@ -684,7 +684,7 @@ exports[`InputPanel Rendering Without chevron 1`] = ` "fontStyle": "normal", "fontWeight": "normal", "letterSpacing": 0.3, - "lineHeight": 10, + "lineHeight": 12, } } > diff --git a/src/theme/tokens/text.ts b/src/theme/tokens/text.ts index 70bd06e..820ac0c 100644 --- a/src/theme/tokens/text.ts +++ b/src/theme/tokens/text.ts @@ -1,7 +1,16 @@ import { Text, Theme } from '../types' -export const createTextStyles = (theme: Theme) => - ({ +export const createTextStyles = (theme: Theme) => { + const speciesLocalName = { + fontFamily: 'Ubuntu', + fontStyle: 'normal', + fontSize: 16, + lineHeight: 24, + fontWeight: 'bold', + color: theme.color.text.system.strong, + } satisfies Text['speciesLocalName'] + + return { iconLabel: { ...theme.font.extraSmall, color: theme.color.text.system.subtle, @@ -19,13 +28,10 @@ export const createTextStyles = (theme: Theme) => fontStyle: 'italic', color: theme.color.text.system.subtler, }, - speciesLocalName: { - fontFamily: 'Ubuntu', - fontStyle: 'normal', - fontSize: 16, - lineHeight: 24, - fontWeight: 'bold', - color: theme.color.text.system.strong, + speciesLocalName, + speciesLocalNameCompact: { + ...speciesLocalName, + lineHeight: 22, }, speciesScientificName: { fontFamily: 'Ubuntu', @@ -85,4 +91,14 @@ export const createTextStyles = (theme: Theme) => ...theme.font.extraSmall, color: theme.color.text.system.subtler, }, - }) satisfies Text + inputPanelHeader: { + fontFamily: 'Ubuntu', + fontStyle: 'normal', + fontSize: 10, + lineHeight: 12, + fontWeight: 'normal', + letterSpacing: 0.3, + color: theme.color.text.system.subtler, + }, + } satisfies Text +} diff --git a/src/theme/types.ts b/src/theme/types.ts index 6e6eb53..fd4504d 100644 --- a/src/theme/types.ts +++ b/src/theme/types.ts @@ -301,7 +301,9 @@ export type TextName = | 'thumbnail' | 'subLabel' | 'speciesLocalName' + | 'speciesLocalNameCompact' | 'speciesScientificName' + | 'inputPanelHeader' | keyof TextNameOverrides export interface Text { @@ -323,6 +325,8 @@ export interface Text { thumbnail: TextStyle subLabel: TextStyle speciesLocalName: TextStyle + speciesLocalNameCompact: TextStyle speciesScientificName: TextStyle + inputPanelHeader: TextStyle [name: string]: TextStyle }