From e819285b2c5803dff5107666c371c556c4be9b1c Mon Sep 17 00:00:00 2001
From: Gowtham G <webappsbygowtham@gmail.com>
Date: Sat, 30 Sep 2023 17:20:27 +0530
Subject: [PATCH] fix: deprecate background property from UserTheme and fix h1
 text color

Changes:
- Deprecate background property from UserTheme it wasn't used and
background color can be easily override using flatlist props
- H1 styles wasn't inheriting user specified text color
---
 src/lib/Markdown.tsx                               |  6 +-----
 .../__tests__/__snapshots__/Markdown.spec.tsx.snap |  6 ++++++
 src/theme/colors.ts                                | 14 ++++++++++++--
 src/theme/styles.ts                                |  1 +
 src/theme/types.ts                                 |  4 ++--
 5 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/lib/Markdown.tsx b/src/lib/Markdown.tsx
index 4bb7204d..583130dc 100644
--- a/src/lib/Markdown.tsx
+++ b/src/lib/Markdown.tsx
@@ -7,7 +7,6 @@ import React, {
 import { FlatList, useColorScheme } from "react-native";
 import type { MarkdownProps } from "./types";
 import useMarkdown from "../hooks/useMarkdown";
-import colors from "../theme/colors";
 
 const Markdown = ({
 	value,
@@ -45,10 +44,7 @@ const Markdown = ({
 			maxToRenderPerBatch={8}
 			initialNumToRender={8}
 			style={{
-				backgroundColor:
-					colorScheme === "light"
-						? colors.light.background
-						: colors.dark.background,
+				backgroundColor: colorScheme === "light" ? "#ffffff" : "#000000",
 			}}
 			{...flatListProps}
 			data={rnElements}
diff --git a/src/lib/__tests__/__snapshots__/Markdown.spec.tsx.snap b/src/lib/__tests__/__snapshots__/Markdown.spec.tsx.snap
index 1f174f80..50d43865 100644
--- a/src/lib/__tests__/__snapshots__/Markdown.spec.tsx.snap
+++ b/src/lib/__tests__/__snapshots__/Markdown.spec.tsx.snap
@@ -2412,6 +2412,7 @@ exports[`Headings Alternate Syntax: Heading level 1 1`] = `
           {
             "borderBottomColor": "#d0d7de",
             "borderBottomWidth": 1,
+            "color": "#333333",
             "fontSize": 32,
             "fontWeight": "bold",
             "letterSpacing": 0,
@@ -2460,6 +2461,7 @@ exports[`Headings Alternate Syntax: Heading level 1 1`] = `
           {
             "borderBottomColor": "#d0d7de",
             "borderBottomWidth": 1,
+            "color": "#333333",
             "fontSize": 32,
             "fontWeight": "bold",
             "letterSpacing": 0,
@@ -2588,6 +2590,7 @@ exports[`Headings Best Practice 1`] = `
           {
             "borderBottomColor": "#d0d7de",
             "borderBottomWidth": 1,
+            "color": "#333333",
             "fontSize": 32,
             "fontWeight": "bold",
             "letterSpacing": 0,
@@ -2698,6 +2701,7 @@ exports[`Headings Best Practice 1`] = `
           {
             "borderBottomColor": "#d0d7de",
             "borderBottomWidth": 1,
+            "color": "#333333",
             "fontSize": 32,
             "fontWeight": "bold",
             "letterSpacing": 0,
@@ -2758,6 +2762,7 @@ exports[`Headings Heading level 1 1`] = `
           {
             "borderBottomColor": "#d0d7de",
             "borderBottomWidth": 1,
+            "color": "#333333",
             "fontSize": 32,
             "fontWeight": "bold",
             "letterSpacing": 0,
@@ -2806,6 +2811,7 @@ exports[`Headings Heading level 1 1`] = `
           {
             "borderBottomColor": "#d0d7de",
             "borderBottomWidth": 1,
+            "color": "#333333",
             "fontSize": 32,
             "fontWeight": "bold",
             "letterSpacing": 0,
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
index fdf37fc4..7482d1a5 100644
--- a/src/theme/colors.ts
+++ b/src/theme/colors.ts
@@ -1,5 +1,15 @@
-export type ColorKeysType = "background" | "code" | "link" | "text" | "border";
-export type ColorsPropType = Record<ColorKeysType, string>;
+import type { ColorValue } from "react-native";
+
+export interface ColorsPropType {
+	code: ColorValue;
+	link: ColorValue;
+	text: ColorValue;
+	border: ColorValue;
+	/**
+	 * @deprecated Use flatlist containerStyle or style prop for setting background color
+	 */
+	background?: ColorValue;
+}
 
 const colors: Record<"light" | "dark", ColorsPropType> = {
 	light: {
diff --git a/src/theme/styles.ts b/src/theme/styles.ts
index d17ee7c9..30649745 100644
--- a/src/theme/styles.ts
+++ b/src/theme/styles.ts
@@ -75,6 +75,7 @@ const getStyles = (
 			userStyles?.blockquote,
 		]),
 		h1: StyleSheet.flatten([
+			fontStyle.heading,
 			{
 				fontSize: 32,
 				lineHeight: 40,
diff --git a/src/theme/types.ts b/src/theme/types.ts
index 0dd54275..0dce4869 100644
--- a/src/theme/types.ts
+++ b/src/theme/types.ts
@@ -1,5 +1,5 @@
 import type { ImageStyle, TextStyle, ViewStyle } from "react-native";
-import type { ColorKeysType } from "./colors";
+import type { ColorsPropType } from "./colors";
 import type { SpacingKeysType } from "./spacing";
 
 export interface MarkedStyles {
@@ -28,6 +28,6 @@ export interface MarkedStyles {
 }
 
 export interface UserTheme {
-	colors?: Record<ColorKeysType, string>;
+	colors?: ColorsPropType;
 	spacing?: Record<SpacingKeysType, number>;
 }