[theme/fix] Change lightGrey -> lightGray

Author: dheeraj1429

__test__/Badge.test.tsx

@@ -31,7 +31,7 @@ describe('Badge', () => {
       error: { color: 'pink' },
       info: { color: 'blue' },
       gray: { color: 'red' },
-      lightGrey: { color: 'green' },
+      lightGray: { color: 'green' },
       warning: { color: 'blue' },
     },
   };

__test__/CheckBox.test.tsx

@@ -36,7 +36,7 @@ describe('CheckBox Component', () => {
       error: { color: 'pink' },
       info: { color: 'blue' },
       gray: { color: 'red' },
-      lightGrey: { color: 'green' },
+      lightGray: { color: 'green' },
       warning: { color: 'blue' },
     },
   };

__test__/utils.test.ts

@@ -276,18 +276,18 @@ describe('getVariant', () => {
     expect(result).toBe(defaultLightTheme.colors.gray[500]);
   });
 
-  it('should return lightGrey color from config if available', () => {
+  it('should return lightGray color from config if available', () => {
     const result = getVariant({
-      variant: 'lightGrey',
+      variant: 'lightGray',
       colors: defaultLightTheme.colors,
-      config: { lightGrey: { color: '#EEEEEE' } },
+      config: { lightGray: { color: '#EEEEEE' } },
     });
     expect(result).toBe('#EEEEEE');
   });
 
-  it('should return lightGrey color from colors fallback if not in config', () => {
+  it('should return lightGray color from colors fallback if not in config', () => {
     const result = getVariant({
-      variant: 'lightGrey',
+      variant: 'lightGray',
       colors: defaultLightTheme.colors,
     });
     expect(result).toBe(defaultLightTheme.colors.gray[200]);

src/components/ActivityIndicator/ActivityIndicator.styles.ts

@@ -11,7 +11,7 @@ const colorConfig: GetVariantArgs<unknown>['config'] = {
   success: { color: green[500] },
   warning: { color: yellow[500] },
   gray: { color: gray[50] },
-  lightGrey: { color: gray[500] },
+  lightGray: { color: gray[500] },
 };
 
 export const getActivityIndicatorColor = ({ variant, colors, switchMode }: GetActivityIndicatorColor): ColorValue => {

src/components/Alert/utils.ts

@@ -21,10 +21,10 @@ export const getAlertTitleStyles = ({ variant, variation, colorScheme }: GetAler
   const isLight = colorScheme === 'light';
 
   const isWarningVariant = variant === 'warning';
-  const isLightGreyVariant = variant === 'lightGrey';
+  const islightGrayVariant = variant === 'lightGray';
   const isOutlinedAlert = variation === 'outlined';
 
-  if (isLightGreyVariant && isLight) {
+  if (islightGrayVariant && isLight) {
     return { color: gray[900] };
   }
 

src/components/Button/Button.tsx

@@ -177,7 +177,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       } else if (buttonThemeConfig?.labelColor) {
         textColor = buttonThemeConfig.labelColor;
       } else if (isContainedButton) {
-        if (buttonColor === 'lightGrey') {
+        if (buttonColor === 'lightGray') {
           textColor = themeColors.gray[900];
           _loadingIndicatorColor = themeColors.gray[900];
         } else if (buttonColor === 'warning') {
@@ -186,7 +186,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
         } else {
           textColor = gray[50];
         }
-      } else if (isOutlinedButton && (buttonColor === 'gray' || buttonColor === 'lightGrey')) {
+      } else if (isOutlinedButton && (buttonColor === 'gray' || buttonColor === 'lightGray')) {
         textColor = themeColors.gray[900];
       } else {
         textColor = getVariant({ variant: buttonColor, colors: themeColors });

src/components/Chip/Chip.style.ts

@@ -93,7 +93,7 @@ export const labelStyles = ({
     color === 'gray'
   ) {
     textColor = gray[50];
-  } else if (color === 'lightGrey') {
+  } else if (color === 'lightGray') {
     textColor = colors.gray[800];
   } else if (color === 'warning') {
     textColor = gray[800];

src/utils/utils.ts

@@ -9,7 +9,7 @@ export const WRAPPER_BOTTOM_OFFSET = 50;
  * Define the allowed variant types for themes, used to categorize styles like primary, secondary, etc.
  * These variants can be used to specify different styling options.
  */
-export type VariantTypes = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | 'gray' | 'lightGrey';
+export type VariantTypes = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning' | 'gray' | 'lightGray';
 /**
  * Interface for default options that can be applied to variations.
  * The `color` property is optional and represents the color value for the variation.
@@ -51,8 +51,8 @@ export const getVariant = <T>({ variant, colors, config }: GetVariantArgs<T>): C
     return config?.warning?.color ?? colors.yellow[500];
   } else if (variant === 'gray') {
     return config?.gray?.color ?? colors.gray[500];
-  } else if (variant === 'lightGrey') {
-    return config?.lightGrey?.color ?? colors.gray[200];
+  } else if (variant === 'lightGray') {
+    return config?.lightGray?.color ?? colors.gray[200];
   }
   return colors.secondary[500];
 };