Align color names and values with UI design

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

src/components/Location.tsx

@@ -13,7 +13,7 @@ type Props = {
 
 const Location = ({ location, containerStyle }: Props) => (
   <IconText
-    icon={<Icon name="map-marker-alt" style="solid" color={theme.color.greySemi} size={theme.icon.size.medium} />}
+    icon={<Icon name="map-marker-alt" style="solid" color={theme.color.grey300} size={theme.icon.size.medium} />}
     text={location}
     style={{
       containerStyle,

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,

src/components/NotificationPopup.tsx

@@ -27,7 +27,7 @@ const NotificationPopup = ({ visible, title, message, leftButton, rightButton, o
 
         {onClose && (
           <TouchableOpacity testID="close" onPress={onClose} activeOpacity={0.5} style={styles.closeButton}>
-            <Icon name="times" color={theme.color.greyBase} size={theme.icon.size.extraLarge} />
+            <Icon name="times" color={theme.color.grey500} size={theme.icon.size.extraLarge} />
           </TouchableOpacity>
         )}
       </View>

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,

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

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.grey60,
   },
   viewPort: {
     flexDirection: 'column',

src/components/ProgressBarList.tsx

@@ -101,7 +101,7 @@ const ProgressBarList = ({ progressBars, separator }: Props) => {
                 size={theme.icon.size.small}
               />
             ) : (
-              <Icon name="circle-check" color={theme.color.greySemi} size={theme.icon.size.small} />
+              <Icon name="circle-check" color={theme.color.grey300} size={theme.icon.size.small} />
             )}
           </View>
         ))}
@@ -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: {

src/components/Tooltip.tsx

@@ -44,7 +44,7 @@ const Tooltip = ({
           {closable && (
             <View style={{ ...styles.iconContainer, marginLeft: theme.margin.common }}>
               <TouchableOpacity testID="close" onPress={onClose} activeOpacity={0.5} accessibilityLabel="close">
-                <Icon name="times" color={theme.color.greyBase} size={theme.icon.size.extraLarge} />
+                <Icon name="times" color={theme.color.grey500} size={theme.icon.size.extraLarge} />
               </TouchableOpacity>
             </View>
           )}

src/components/__tests__/BrandIcon.test.tsx

@@ -13,7 +13,7 @@ describe('BrandIcon', () => {
     })
 
     test('With color', () => {
-      const { toJSON } = render(<BrandIcon name="wikipedia-w" color={theme.color.error} />)
+      const { toJSON } = render(<BrandIcon name="wikipedia-w" color={theme.color.error500} />)
       expect(toJSON()).toMatchSnapshot()
     })
 

src/components/__tests__/FilterButton.test.tsx

@@ -20,7 +20,7 @@ describe('FilterButton', () => {
     test('Disabled', () => {
       const { toJSON } = render(<FilterButton content={content} active={false} style={{ flex: 1 }} />)
       expect(toJSON()).toMatchSnapshot()
-      expect(content).toHaveBeenCalledWith({ color: theme.color.greyDark })
+      expect(content).toHaveBeenCalledWith({ color: theme.color.grey800 })
     })
   })
 

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,

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,

src/components/__tests__/__snapshots__/InputField.test.tsx.snap

@@ -31,7 +31,7 @@ exports[`InputField Rendering Disabled 1`] = `
   <View
     style={
       {
-        "backgroundColor": "#F8F9FA",
+        "backgroundColor": "#F9FAFB",
         "flexDirection": "row",
       }
     }
@@ -482,7 +482,7 @@ exports[`InputField Rendering With focus 1`] = `
       style={
         [
           {
-            "borderColor": "#66A3D0",
+            "borderColor": "#67A4D0",
           },
           {
             "borderRadius": 4,
@@ -538,7 +538,7 @@ exports[`InputField Rendering With focus and an error message 1`] = `
       style={
         [
           {
-            "borderColor": "#66A3D0",
+            "borderColor": "#67A4D0",
           },
           {
             "borderRadius": 4,

src/components/__tests__/__snapshots__/NotificationPopup.test.tsx.snap

@@ -33,7 +33,7 @@ exports[`NotificationPopup Rendering Left and right buttons 1`] = `
     style={
       {
         "alignItems": "stretch",
-        "backgroundColor": "hsla(0, 0%, 18.1%, 0.6)",
+        "backgroundColor": "#66666699",
         "flex": 1,
         "flexDirection": "column",
         "justifyContent": "center",
@@ -317,7 +317,7 @@ exports[`NotificationPopup Rendering Only left button 1`] = `
     style={
       {
         "alignItems": "stretch",
-        "backgroundColor": "hsla(0, 0%, 18.1%, 0.6)",
+        "backgroundColor": "#66666699",
         "flex": 1,
         "flexDirection": "column",
         "justifyContent": "center",
@@ -526,7 +526,7 @@ exports[`NotificationPopup Rendering With close button 1`] = `
     style={
       {
         "alignItems": "stretch",
-        "backgroundColor": "hsla(0, 0%, 18.1%, 0.6)",
+        "backgroundColor": "#66666699",
         "flex": 1,
         "flexDirection": "column",
         "justifyContent": "center",

src/components/__tests__/__snapshots__/Panel.test.tsx.snap

@@ -24,7 +24,7 @@ exports[`Panel Rendering 1`] = `
       [
         {
           "backgroundColor": "#FFFFFF",
-          "borderColor": "#F8F9FA",
+          "borderColor": "#F9FAFB",
           "borderTopWidth": 1,
           "elevation": 4,
           "paddingVertical": 16,
@@ -68,7 +68,7 @@ exports[`Panel Rendering without top shadow 1`] = `
       [
         {
           "backgroundColor": "#FFFFFF",
-          "borderColor": "#F8F9FA",
+          "borderColor": "#F9FAFB",
           "borderTopWidth": 1,
           "elevation": 4,
           "paddingVertical": 16,

src/components/__tests__/__snapshots__/Popup.test.tsx.snap

@@ -33,7 +33,7 @@ exports[`Popup Rendering 1`] = `
     style={
       {
         "alignItems": "stretch",
-        "backgroundColor": "hsla(0, 0%, 18.1%, 0.6)",
+        "backgroundColor": "#66666699",
         "flex": 1,
         "flexDirection": "column",
         "justifyContent": "center",