Align color names and values with UI design (#84)

Resolves: observation/app#1179

Author: SjaakSchilperoort

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",

src/components/BackButton.tsx

@@ -13,7 +13,7 @@ const BackButton = ({ navigation }: Props) => (
   <IconButton
     containerStyle={{ padding: theme.margin.common }}
     onPress={() => 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 }}
   />
 )
 

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,

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
 

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.accentLime400,
     paddingHorizontal: theme.margin.common,
     paddingVertical: theme.margin.half,
     borderRadius: theme.margin.common,

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,
   },
 })

src/components/Date.tsx

@@ -13,7 +13,7 @@ type Props = {
 
 const Date = ({ date, containerStyle }: Props) => (
   <IconText
-    icon={<Icon name="calendar-day" style={'solid'} color={theme.color.greySemi} size={theme.icon.size.medium} />}
+    icon={<Icon name="calendar-day" style={'solid'} color={theme.color.grey300} size={theme.icon.size.medium} />}
     text={date}
     style={{
       containerStyle,

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 (
     <TouchableOpacity
       testID="touchable-opacity"
@@ -36,6 +36,6 @@ const styles = StyleSheet.create({
     backgroundColor: theme.color.white,
   },
   activeButton: {
-    backgroundColor: theme.color.primary,
+    backgroundColor: theme.color.primary500,
   },
 })

src/components/Icon.tsx

@@ -22,7 +22,7 @@ export type IconProps = IconAppearanceProps & {
 export const Icon = ({ name, color, size, testID, style, rotation }: IconProps): React.ReactElement => {
   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
 

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 = ({
       </View>
       {errorMessage && (
         <IconText
-          icon={<Icon name="exclamation-triangle" size={theme.icon.size.small} color={theme.color.error} />}
+          icon={<Icon name="exclamation-triangle" size={theme.icon.size.small} color={theme.color.error500} />}
           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,
   },
 })