From f7a3e9d0eacd22ba45863ba021c31d2850a9dc78 Mon Sep 17 00:00:00 2001 From: Sjaak Schilperoort Date: Tue, 17 Feb 2026 09:14:29 +0100 Subject: [PATCH 1/4] Align color names and values with UI design --- package.json | 2 +- src/components/BackButton.tsx | 2 +- src/components/BottomSheet.tsx | 2 +- src/components/BrandIcon.tsx | 2 +- src/components/Chip.tsx | 2 +- src/components/ContentImage.tsx | 4 +- src/components/Date.tsx | 2 +- src/components/FilterButton.tsx | 4 +- src/components/Icon.tsx | 2 +- src/components/InputField.tsx | 10 +-- src/components/Location.tsx | 2 +- src/components/Notification.tsx | 2 +- src/components/NotificationPopup.tsx | 2 +- src/components/PageIndicator.tsx | 2 +- src/components/Panel.tsx | 2 +- src/components/Popup.tsx | 2 +- src/components/ProgressBarList.tsx | 8 +-- src/components/Tooltip.tsx | 2 +- src/components/__tests__/BrandIcon.test.tsx | 2 +- .../__tests__/FilterButton.test.tsx | 2 +- .../__snapshots__/ContentImage.test.tsx.snap | 10 +-- .../__snapshots__/InputField.test.tsx.snap | 6 +- .../NotificationPopup.test.tsx.snap | 6 +- .../__snapshots__/Panel.test.tsx.snap | 4 +- .../__snapshots__/Popup.test.tsx.snap | 2 +- src/lib/LargeButtonStyles.ts | 24 +++---- src/styles/text.ts | 12 ++-- src/styles/theme.ts | 63 +++++++++---------- 28 files changed, 90 insertions(+), 95 deletions(-) diff --git a/package.json b/package.json index 0313ae5..6dbbb7d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@observation.org/react-native-components", - "version": "1.70.0", + "version": "1.71.0", "main": "src/index.ts", "repository": "git@github.com:observation/react-native-components.git", "author": "Observation.org", diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx index 8879e92..4986597 100644 --- a/src/components/BackButton.tsx +++ b/src/components/BackButton.tsx @@ -13,7 +13,7 @@ const BackButton = ({ navigation }: Props) => ( navigation.goBack()} - icon={{ name: 'chevron-left', size: theme.icon.size.extraExtraLarge, color: theme.color.primary }} + icon={{ name: 'chevron-left', size: theme.icon.size.extraExtraLarge, color: theme.color.primary500 }} /> ) diff --git a/src/components/BottomSheet.tsx b/src/components/BottomSheet.tsx index 0f69c13..d641e5c 100644 --- a/src/components/BottomSheet.tsx +++ b/src/components/BottomSheet.tsx @@ -63,7 +63,7 @@ const styles = StyleSheet.create({ container: { ...theme.shadow.ios, borderTopWidth: 1 / 3, - borderTopColor: theme.color.greySemi, + borderTopColor: theme.color.grey300, }, bottomSheetContainer: { ...theme.shadow.android, diff --git a/src/components/BrandIcon.tsx b/src/components/BrandIcon.tsx index a105e34..1166d96 100644 --- a/src/components/BrandIcon.tsx +++ b/src/components/BrandIcon.tsx @@ -13,7 +13,7 @@ type Props = { export const BrandIcon = ({ name, color, size }: Props) => { const icon = BrandIcons[name] - const iconColor = color ?? theme.color.primary + const iconColor = color ?? theme.color.primary500 const iconSize = size ?? theme.icon.size.large const FontAwesomeIconTypeErased = FontAwesomeIcon as unknown as any diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index 7fd7fde..edd5d38 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -49,7 +49,7 @@ const styles = StyleSheet.create({ fontSize: theme.font.size.medium, }, chipContainer: { - backgroundColor: theme.color.successLight, + backgroundColor: theme.color.success400, paddingHorizontal: theme.margin.common, paddingVertical: theme.margin.half, borderRadius: theme.margin.common, diff --git a/src/components/ContentImage.tsx b/src/components/ContentImage.tsx index 5b4e727..79484e9 100644 --- a/src/components/ContentImage.tsx +++ b/src/components/ContentImage.tsx @@ -67,7 +67,7 @@ const styles = StyleSheet.create({ ...theme.shadow.android, ...theme.roundedLarge, borderWidth: 1, - borderColor: theme.color.greyLight, + borderColor: theme.color.grey50, }, imageContainer: { margin: theme.margin.common, @@ -91,6 +91,6 @@ const styles = StyleSheet.create({ }, description: { ...font.small, - color: theme.color.greyBase, + color: theme.color.grey500, }, }) diff --git a/src/components/Date.tsx b/src/components/Date.tsx index b84739a..590a69e 100644 --- a/src/components/Date.tsx +++ b/src/components/Date.tsx @@ -13,7 +13,7 @@ type Props = { const Date = ({ date, containerStyle }: Props) => ( } + icon={} text={date} style={{ containerStyle, diff --git a/src/components/FilterButton.tsx b/src/components/FilterButton.tsx index fac8910..f65a4f1 100644 --- a/src/components/FilterButton.tsx +++ b/src/components/FilterButton.tsx @@ -12,7 +12,7 @@ type Props = { const FilterButton = ({ content, onPress, active = false, style }: Props) => { const buttonStyle = active ? styles.activeButton : styles.button - const contentColor = active ? theme.color.white : theme.color.greyDark + const contentColor = active ? theme.color.white : theme.color.grey800 return ( { const iconStyle = style ?? 'light' const icon = iconStyle === 'light' ? Icons[name].light : Icons[name].solid - const iconColor = color ?? theme.color.primary + const iconColor = color ?? theme.color.primary500 const iconSize = size ?? theme.icon.size.large const transform = rotation ? { rotate: rotation } : undefined diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx index 4ef3b22..6ed1383 100644 --- a/src/components/InputField.tsx +++ b/src/components/InputField.tsx @@ -43,8 +43,8 @@ const InputField = ({ const hasErrors = !!errorMessage const borderColor = theme.getBorderColor({ isFocused, hasErrors }) - const inputContainerStyle = disabled ? { backgroundColor: theme.color.greyLight } : {} - const placeholderTextColor = disabled ? theme.color.greySemi : theme.color.placeholder + const inputContainerStyle = disabled ? { backgroundColor: theme.color.grey50 } : {} + const placeholderTextColor = disabled ? theme.color.grey300 : theme.color.grey500 const layoutHandler = inputProps?.autoFocus ? () => { @@ -82,7 +82,7 @@ const InputField = ({ {errorMessage && ( } + icon={} text={errorMessage} style={{ textStyle: [styles.errorStyle, errorStyle], @@ -117,10 +117,10 @@ const styles = StyleSheet.create({ }, errorStyle: { ...font.small, - color: theme.color.error, + color: theme.color.error500, }, descriptionStyle: { ...font.small, - color: theme.color.greyDark, + color: theme.color.grey800, }, }) diff --git a/src/components/Location.tsx b/src/components/Location.tsx index d45cba2..3611b71 100644 --- a/src/components/Location.tsx +++ b/src/components/Location.tsx @@ -13,7 +13,7 @@ type Props = { const Location = ({ location, containerStyle }: Props) => ( } + icon={} text={location} style={{ containerStyle, diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx index 5b13c44..8d3c934 100644 --- a/src/components/Notification.tsx +++ b/src/components/Notification.tsx @@ -14,7 +14,7 @@ const Notification = ({ count, style }: Props) => ( style={[ style, { - backgroundColor: theme.color.error, + backgroundColor: theme.color.error500, borderRadius: 9, width: 18, height: 18, diff --git a/src/components/NotificationPopup.tsx b/src/components/NotificationPopup.tsx index 13b3ca6..5614f8b 100644 --- a/src/components/NotificationPopup.tsx +++ b/src/components/NotificationPopup.tsx @@ -27,7 +27,7 @@ const NotificationPopup = ({ visible, title, message, leftButton, rightButton, o {onClose && ( - + )} diff --git a/src/components/PageIndicator.tsx b/src/components/PageIndicator.tsx index 1390088..0e96af2 100644 --- a/src/components/PageIndicator.tsx +++ b/src/components/PageIndicator.tsx @@ -75,7 +75,7 @@ const styles = StyleSheet.create({ width: 8, margin: 4, ...theme.rounded, - backgroundColor: theme.color.greyBase, + backgroundColor: theme.color.grey500, }, smallDot: { margin: 6, diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx index f28f15d..4ffe236 100644 --- a/src/components/Panel.tsx +++ b/src/components/Panel.tsx @@ -31,6 +31,6 @@ const styles = StyleSheet.create({ backgroundColor: theme.color.white, ...theme.shadowSmall.android, borderTopWidth: 1, - borderColor: theme.color.greyLight, + borderColor: theme.color.grey50, }, }) diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx index b754bff..1d40797 100644 --- a/src/components/Popup.tsx +++ b/src/components/Popup.tsx @@ -32,7 +32,7 @@ const styles = StyleSheet.create({ alignItems: 'stretch', justifyContent: 'center', flexDirection: 'column', - backgroundColor: theme.color.modalBackground, + backgroundColor: theme.overlay.grey99, }, viewPort: { flexDirection: 'column', diff --git a/src/components/ProgressBarList.tsx b/src/components/ProgressBarList.tsx index 08fce34..57b1f9b 100644 --- a/src/components/ProgressBarList.tsx +++ b/src/components/ProgressBarList.tsx @@ -101,7 +101,7 @@ const ProgressBarList = ({ progressBars, separator }: Props) => { size={theme.icon.size.small} /> ) : ( - + )} ))} @@ -130,7 +130,7 @@ const styles = StyleSheet.create({ }, label: { ...font.small, - color: theme.color.white70, + color: theme.overlay.white70, justifyContent: 'center', lineHeight: barHeight, }, @@ -141,7 +141,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', borderTopRightRadius: borderRadius, borderBottomRightRadius: borderRadius, - backgroundColor: theme.color.greySemi, + backgroundColor: theme.color.grey300, width: '100%', }, numbersContainer: { @@ -153,7 +153,7 @@ const styles = StyleSheet.create({ }, denominator: { ...font.small, - color: theme.color.white70, + color: theme.overlay.white70, lineHeight: barHeight, }, numerator: { diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx index 534f180..eaf1038 100644 --- a/src/components/Tooltip.tsx +++ b/src/components/Tooltip.tsx @@ -44,7 +44,7 @@ const Tooltip = ({ {closable && ( - + )} diff --git a/src/components/__tests__/BrandIcon.test.tsx b/src/components/__tests__/BrandIcon.test.tsx index ef131af..af8fedb 100644 --- a/src/components/__tests__/BrandIcon.test.tsx +++ b/src/components/__tests__/BrandIcon.test.tsx @@ -13,7 +13,7 @@ describe('BrandIcon', () => { }) test('With color', () => { - const { toJSON } = render() + const { toJSON } = render() expect(toJSON()).toMatchSnapshot() }) diff --git a/src/components/__tests__/FilterButton.test.tsx b/src/components/__tests__/FilterButton.test.tsx index a8976e0..4a362cd 100644 --- a/src/components/__tests__/FilterButton.test.tsx +++ b/src/components/__tests__/FilterButton.test.tsx @@ -20,7 +20,7 @@ describe('FilterButton', () => { test('Disabled', () => { const { toJSON } = render() expect(toJSON()).toMatchSnapshot() - expect(content).toHaveBeenCalledWith({ color: theme.color.greyDark }) + expect(content).toHaveBeenCalledWith({ color: theme.color.grey800 }) }) }) diff --git a/src/components/__tests__/__snapshots__/ContentImage.test.tsx.snap b/src/components/__tests__/__snapshots__/ContentImage.test.tsx.snap index 4fcfad5..c884d90 100644 --- a/src/components/__tests__/__snapshots__/ContentImage.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ContentImage.test.tsx.snap @@ -394,7 +394,7 @@ exports[`ContentImage Interaction Click the image to show the lightbox 1`] = ` style={ { "backgroundColor": "#FFFFFF", - "borderColor": "#F8F9FA", + "borderColor": "#F9FAFB", "borderRadius": 8, "borderWidth": 1, "elevation": 6, @@ -518,7 +518,7 @@ exports[`ContentImage Interaction Close the lightbox 1`] = ` style={ { "backgroundColor": "#FFFFFF", - "borderColor": "#F8F9FA", + "borderColor": "#F9FAFB", "borderRadius": 8, "borderWidth": 1, "elevation": 6, @@ -642,7 +642,7 @@ exports[`ContentImage Rendering With alt title 1`] = ` style={ { "backgroundColor": "#FFFFFF", - "borderColor": "#F8F9FA", + "borderColor": "#F9FAFB", "borderRadius": 8, "borderWidth": 1, "elevation": 6, @@ -766,7 +766,7 @@ exports[`ContentImage Rendering With alt title and text 1`] = ` style={ { "backgroundColor": "#FFFFFF", - "borderColor": "#F8F9FA", + "borderColor": "#F9FAFB", "borderRadius": 8, "borderWidth": 1, "elevation": 6, @@ -905,7 +905,7 @@ exports[`ContentImage Rendering With alt title ending in delimiter 1`] = ` style={ { "backgroundColor": "#FFFFFF", - "borderColor": "#F8F9FA", + "borderColor": "#F9FAFB", "borderRadius": 8, "borderWidth": 1, "elevation": 6, diff --git a/src/components/__tests__/__snapshots__/InputField.test.tsx.snap b/src/components/__tests__/__snapshots__/InputField.test.tsx.snap index a8195bf..58fef44 100644 --- a/src/components/__tests__/__snapshots__/InputField.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/InputField.test.tsx.snap @@ -31,7 +31,7 @@ exports[`InputField Rendering Disabled 1`] = ` = { tabIconLabel: font.small, inputLabel: { ...font.smallBold, - color: theme.color.greyDark, + color: theme.color.grey800, }, scientificName: { ...font.small, fontStyle: 'italic', - color: theme.color.greyBase, + color: theme.color.grey500, }, body: { ...font.medium, - color: theme.color.greyDark, + color: theme.color.grey800, }, light: { ...font.medium, - color: theme.color.greyBase, + color: theme.color.grey500, }, lead: { ...font.mediumBold, @@ -46,11 +46,11 @@ const text: Record = { }, link: { ...font.medium, - color: theme.color.primary, + color: theme.color.primary500, }, linkBold: { ...font.mediumBold, - color: theme.color.primary, + color: theme.color.primary500, }, input: { ...font.large, diff --git a/src/styles/theme.ts b/src/styles/theme.ts index c909eae..67c7363 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -1,5 +1,3 @@ -import Color from 'color' - const font = { size: { extraSmall: 10, @@ -31,36 +29,32 @@ const icon = { }, } -const black = '#212121' -const greyBase = '#939393' - const color = { - primary: '#0066B1', - primaryLighter: '#66A3D0', - primaryLightest: '#E6F0F7', - secondaryLight: '#709FFD', - secondaryLightestExtra: '#F0F5FF', - black, - greyDark: '#666666', - greyBase, - placeholder: greyBase, - greySemi: '#E6E6E6', - greyLight: '#F8F9FA', white: '#FFFFFF', + black: '#212121', + grey800: '#666666', + grey500: '#939393', + grey300: '#E6E6E6', + grey50: '#F9FAFB', + primary500: '#0066B1', + primary300: '#67A4D0', + primary50: '#E8F1F8', + success600: '#689023', + success500: '#85B92D', + success400: '#9DC556', + success300: '#B5D482', + success200: '#CEE2AB', + success50: '#F7FBEF', + warning500: '#F4C015', + error500: '#EA554B', + error200: '#F7BAB6', + accentSky400: '#72A1FD', + accentSky50: '#F0F5FF', +} + +const overlay = { white70: '#FFFFFFB4', - white77: '#FFFFFFC4', - white80: '#FFFFFFCD', - success: '#84B72C', - successLight: '#9DC556', - successLighter: '#B5D480', - successLightest: '#CEE2AB', - successLightestExtra: '#F7FBEF', - successDark: '#6A9223', - warning: '#F4C013', - error: '#EA554B', - errorLightest: '#F7BBB7', - modalBackground: Color(black).alpha(0.6).lighten(0.4).string(), - darkPanelBackground: Color(black).alpha(0.5).string(), + grey99: '#66666699', } const margin = { @@ -91,12 +85,13 @@ const bottomGradientColors = ['#30303000', '#30303059'] const topGradientColors = bottomGradientColors.slice().reverse() const getBorderColor = ({ isFocused = false, hasErrors = false }) => - hasErrors ? color.error : isFocused ? color.primaryLighter : color.greySemi + hasErrors ? color.error500 : isFocused ? color.primary300 : color.grey300 export default { font, icon, color, + overlay, bottomGradientColors, topGradientColors, margin, @@ -104,11 +99,11 @@ export default { shadow: { android: { elevation: 6, - shadowColor: color.greyBase, + shadowColor: color.grey500, }, ios: { shadowOffset: { width: 0, height: 4 }, - shadowColor: color.greySemi, + shadowColor: color.grey300, shadowOpacity: 0.8, shadowRadius: 4, }, @@ -116,11 +111,11 @@ export default { shadowSmall: { android: { elevation: 4, - shadowColor: color.greyBase, + shadowColor: color.grey500, }, ios: { shadowOffset: { width: 0, height: 2 }, - shadowColor: color.greySemi, + shadowColor: color.grey300, shadowOpacity: 0.8, shadowRadius: 2, }, From e1d33ee3051f014b54a5ff1b4be04952f3156524 Mon Sep 17 00:00:00 2001 From: Sjaak Schilperoort Date: Tue, 17 Feb 2026 11:01:18 +0100 Subject: [PATCH 2/4] Fix overlay names and values --- src/components/Popup.tsx | 2 +- .../ProgressBarList.test.tsx.snap | 32 +++++++++---------- src/styles/theme.ts | 4 +-- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx index 1d40797..bb79c34 100644 --- a/src/components/Popup.tsx +++ b/src/components/Popup.tsx @@ -32,7 +32,7 @@ const styles = StyleSheet.create({ alignItems: 'stretch', justifyContent: 'center', flexDirection: 'column', - backgroundColor: theme.overlay.grey99, + backgroundColor: theme.overlay.grey60, }, viewPort: { flexDirection: 'column', diff --git a/src/components/__tests__/__snapshots__/ProgressBarList.test.tsx.snap b/src/components/__tests__/__snapshots__/ProgressBarList.test.tsx.snap index 4799653..b81c440 100644 --- a/src/components/__tests__/__snapshots__/ProgressBarList.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/ProgressBarList.test.tsx.snap @@ -34,7 +34,7 @@ exports[`ProgressBarList Show bars 1`] = ` numberOfLines={1} style={ { - "color": "#FFFFFFB4", + "color": "#FFFFFFB3", "fontFamily": "Ubuntu", "fontSize": 12, "fontStyle": "normal", @@ -73,7 +73,7 @@ exports[`ProgressBarList Show bars 1`] = ` numberOfLines={1} style={ { - "color": "#FFFFFFB4", + "color": "#FFFFFFB3", "fontFamily": "Ubuntu", "fontSize": 12, "fontStyle": "normal", @@ -112,7 +112,7 @@ exports[`ProgressBarList Show bars 1`] = ` numberOfLines={1} style={ { - "color": "#FFFFFFB4", + "color": "#FFFFFFB3", "fontFamily": "Ubuntu", "fontSize": 12, "fontStyle": "normal", @@ -151,7 +151,7 @@ exports[`ProgressBarList Show bars 1`] = ` numberOfLines={1} style={ { - "color": "#FFFFFFB4", + "color": "#FFFFFFB3", "fontFamily": "Ubuntu", "fontSize": 12, "fontStyle": "normal", @@ -190,7 +190,7 @@ exports[`ProgressBarList Show bars 1`] = ` numberOfLines={1} style={ { - "color": "#FFFFFFB4", + "color": "#FFFFFFB3", "fontFamily": "Ubuntu", "fontSize": 12, "fontStyle": "normal", @@ -229,7 +229,7 @@ exports[`ProgressBarList Show bars 1`] = ` numberOfLines={1} style={ { - "color": "#FFFFFFB4", + "color": "#FFFFFFB3", "fontFamily": "Ubuntu", "fontSize": 12, "fontStyle": "normal", @@ -268,7 +268,7 @@ exports[`ProgressBarList Show bars 1`] = ` numberOfLines={1} style={ { - "color": "#FFFFFFB4", + "color": "#FFFFFFB3", "fontFamily": "Ubuntu", "fontSize": 12, "fontStyle": "normal", @@ -358,7 +358,7 @@ exports[`ProgressBarList Show bars 1`] = ` Date: Tue, 17 Feb 2026 11:46:42 +0100 Subject: [PATCH 3/4] Changes after review by Karel --- src/components/Chip.tsx | 2 +- src/components/__tests__/__snapshots__/Chip.test.tsx.snap | 4 ++-- src/styles/theme.ts | 5 +++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index edd5d38..a99f507 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -49,7 +49,7 @@ const styles = StyleSheet.create({ fontSize: theme.font.size.medium, }, chipContainer: { - backgroundColor: theme.color.success400, + backgroundColor: theme.color.accentLime400, paddingHorizontal: theme.margin.common, paddingVertical: theme.margin.half, borderRadius: theme.margin.common, diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap index 7bc5d80..7703451 100644 --- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap +++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap @@ -40,7 +40,7 @@ exports[`Chip Rendering All props 1`] = ` style={ [ { - "backgroundColor": "#9DC556", + "backgroundColor": "#9BC454", "borderRadius": 16, "justifyContent": "center", "minWidth": 44, @@ -128,7 +128,7 @@ exports[`Chip Rendering Required props 1`] = ` style={ [ { - "backgroundColor": "#9DC556", + "backgroundColor": "#9BC454", "borderRadius": 16, "justifyContent": "center", "minWidth": 44, diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 846f8eb..89cd02d 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -41,13 +41,14 @@ const color = { primary50: '#E8F1F8', success600: '#689023', success500: '#85B92D', - success400: '#9DC556', - success300: '#B5D482', + success400: '#9BC454', + success300: '#B6D482', success200: '#CEE2AB', success50: '#F7FBEF', warning500: '#F4C015', error500: '#EA554B', error200: '#F7BAB6', + accentLime400: '#9BC454', accentSky400: '#72A1FD', accentSky50: '#F0F5FF', } From 4beb11a75c489248f3bd3a5a3f05109af76c6419 Mon Sep 17 00:00:00 2001 From: Sjaak Schilperoort Date: Tue, 17 Feb 2026 12:07:31 +0100 Subject: [PATCH 4/4] Remove unused color success300 --- src/styles/theme.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 89cd02d..f03d39c 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -42,7 +42,6 @@ const color = { success600: '#689023', success500: '#85B92D', success400: '#9BC454', - success300: '#B6D482', success200: '#CEE2AB', success50: '#F7FBEF', warning500: '#F4C015',