Merge pull request #539 from gmsgowtham/fix/color-overrides

fix: deprecate background property from UserTheme and fix h1 text color

Author: gmsgowtham

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}

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,

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: {

src/theme/styles.ts

@@ -75,6 +75,7 @@ const getStyles = (
 			userStyles?.blockquote,
 		]),
 		h1: StyleSheet.flatten([
+			fontStyle.heading,
 			{
 				fontSize: 32,
 				lineHeight: 40,

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>;
 }