fix(Typography): 调整Typography明暗主题

uiwjs · Apr 8, 2023 · 127a548 · 127a548
1 parent e9aa004
commit 127a548
Show file tree

Hide file tree

Showing 14 changed files with 133 additions and 44 deletions.
diff --git a/packages/core/src/Typography/Div.tsx b/packages/core/src/Typography/Div.tsx
@@ -1,11 +1,15 @@
 import React, { Fragment } from 'react';
 import { Text, TextProps, ViewProps } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 interface DivProps {
   children?: React.ReactNode;
 }
 
 export default function Div<T>({ children, ...otherProps }: DivProps & TextProps & ViewProps): JSX.Element | null {
+  const theme = useTheme<Theme>();
+  const textColor = theme.colors.primary_text || '#ccc';
   if (!children) {
     return null;
   }
@@ -14,7 +18,7 @@ export default function Div<T>({ children, ...otherProps }: DivProps & TextProps
     return typeof item === 'string' || (item && (item as any).type && (item as any).type.displayName === 'Text');
   });
   if (someStr) {
-    return <Text {...otherProps} children={children} />;
+    return <Text {...otherProps} children={children} style={{ color: textColor }} />;
   }
   return (
     <Fragment>

diff --git a/packages/core/src/Typography/Em.tsx b/packages/core/src/Typography/Em.tsx
@@ -1,18 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, Text, TextProps } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
-const styles = StyleSheet.create({
-  default: {
-    fontStyle: 'italic',
-  },
-});
+type CreStyle = {
+  textColor: string;
+};
+
+function createStyles({ textColor }: CreStyle) {
+  return StyleSheet.create({
+    default: {
+      fontStyle: 'italic',
+      color: textColor,
+    },
+  });
+}
 
 export interface EmProps extends TextProps {
   children?: React.ReactNode;
 }
 
 export default function Em(props: EmProps) {
+  const theme = useTheme<Theme>();
+  const styles = createStyles({
+    textColor: theme.colors.primary_text || '#ccc',
+  });
   return React.cloneElement(<Text />, {
     ...props,
     style: [styles.default, props.style],

diff --git a/packages/core/src/Typography/H1.tsx b/packages/core/src/Typography/H1.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, Text, TextProps } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 const styles = StyleSheet.create({
   default: {
@@ -15,8 +17,11 @@ export interface H1Props extends TextProps {
 }
 
 export default function H1(props: H1Props) {
+  const theme = useTheme<Theme>();
+  const textColor = theme.colors.primary_text || '#ccc';
+
   return (
-    <Text {...props} style={[styles.default, props.style]}>
+    <Text {...props} style={[styles.default, props.style, { color: textColor }]}>
       {props.children}
     </Text>
   );

diff --git a/packages/core/src/Typography/H2.tsx b/packages/core/src/Typography/H2.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, Text, TextProps } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 const styles = StyleSheet.create({
   default: {
@@ -15,8 +17,11 @@ export interface H2Props extends TextProps {
 }
 
 export default function H2(props: H2Props) {
+  const theme = useTheme<Theme>();
+  const textColor = theme.colors.primary_text || '#ccc';
+
   return (
-    <Text {...props} style={[styles.default, props.style]}>
+    <Text {...props} style={[styles.default, props.style, { color: textColor }]}>
       {props.children}
     </Text>
   );

diff --git a/packages/core/src/Typography/H3.tsx b/packages/core/src/Typography/H3.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, Text, TextProps } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 const styles = StyleSheet.create({
   default: {
@@ -15,8 +17,11 @@ export interface H3Props extends TextProps {
 }
 
 export default function H3(props: H3Props) {
+  const theme = useTheme<Theme>();
+  const textColor = theme.colors.primary_text || '#ccc';
+
   return (
-    <Text {...props} style={[styles.default, props.style]}>
+    <Text {...props} style={[styles.default, props.style, { color: textColor }]}>
       {props.children}
     </Text>
   );

diff --git a/packages/core/src/Typography/H4.tsx b/packages/core/src/Typography/H4.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, Text, TextProps } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 const styles = StyleSheet.create({
   default: {
@@ -15,8 +17,11 @@ export interface H4Props extends TextProps {
 }
 
 export default function H4(props: H4Props) {
+  const theme = useTheme<Theme>();
+  const textColor = theme.colors.primary_text || '#ccc';
+
   return (
-    <Text {...props} style={[styles.default, props.style]}>
+    <Text {...props} style={[styles.default, props.style, { color: textColor }]}>
       {props.children}
     </Text>
   );

diff --git a/packages/core/src/Typography/H5.tsx b/packages/core/src/Typography/H5.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, Text, TextProps } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 const styles = StyleSheet.create({
   default: {
@@ -15,8 +17,11 @@ export interface H5Props extends TextProps {
 }
 
 export default function H5(props: H5Props) {
+  const theme = useTheme<Theme>();
+  const textColor = theme.colors.primary_text || '#ccc';
+
   return (
-    <Text {...props} style={[styles.default, props.style]}>
+    <Text {...props} style={[styles.default, props.style, { color: textColor }]}>
       {props.children}
     </Text>
   );

diff --git a/packages/core/src/Typography/H6.tsx b/packages/core/src/Typography/H6.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, Text, TextProps } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 const styles = StyleSheet.create({
   default: {
@@ -15,8 +17,10 @@ export interface H6Props extends TextProps {
 }
 
 export default function H6(props: H6Props) {
+  const theme = useTheme<Theme>();
+  const textColor = theme.colors.primary_text || '#ccc';
   return (
-    <Text {...props} style={[styles.default, props.style]}>
+    <Text {...props} style={[styles.default, props.style, { color: textColor }]}>
       {props.children}
     </Text>
   );

diff --git a/packages/core/src/Typography/Hr.tsx b/packages/core/src/Typography/Hr.tsx
@@ -1,18 +1,32 @@
 import React from 'react';
 import { StyleSheet, View, ViewProps } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
-const styles = StyleSheet.create({
-  default: {
-    height: 1,
-    flexDirection: 'row',
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: '#CDCDCD',
-    marginVertical: 10,
-  },
-});
+type CreStyle = {
+  textColor: string;
+};
+
+function createStyles({ textColor }: CreStyle) {
+  return StyleSheet.create({
+    default: {
+      height: 1,
+      flexDirection: 'row',
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderColor: '#CDCDCD',
+      marginVertical: 10,
+      color: textColor,
+    },
+  });
+}
 
 export interface HrProps extends ViewProps {}
 
 export default function Hr(props: HrProps) {
+  const theme = useTheme<Theme>();
+  const styles = createStyles({
+    textColor: theme.colors.primary_text || '#ccc',
+  });
+  const textColor = theme.colors.primary_text || '#ccc';
   return <View {...props} style={[styles.default, props.style]} />;
 }
diff --git a/packages/core/src/Typography/P.tsx b/packages/core/src/Typography/P.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, Text, TextProps } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 const styles = StyleSheet.create({
   default: {
@@ -15,8 +17,10 @@ export interface PProps extends TextProps {
 }
 
 export default function P(props: PProps) {
+  const theme = useTheme<Theme>();
+  const textColor = theme.colors.primary_text || '#ccc';
   return (
-    <Text {...props} style={[styles.default, props.style]}>
+    <Text {...props} style={[styles.default, props.style, { color: textColor }]}>
       {props.children}
     </Text>
   );

diff --git a/packages/core/src/Typography/RnText.tsx b/packages/core/src/Typography/RnText.tsx
@@ -3,6 +3,8 @@ import { Text as RNText, StyleSheet, TextProps as RNTextProps, TextStyle, Animat
 import _ from 'lodash';
 import Tooltip from '../Tooltip';
 import { rnTextType, getTextPartsByHighlight, sliceText } from '../utils/rn-text';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 export type RnTextProps = RNTextProps & {
   // header:Header标题 ｜ title:列表/From标题 ｜ label:正文,说明,备注label ｜ subLabel:辅助性文字
@@ -37,6 +39,10 @@ const TooltipContainer = ({ content, children }: { content?: string; children?:
 };
 
 export default (props: RnTextProps) => {
+  const theme = useTheme<Theme>();
+  const styles = createStyles({
+    textColor: theme.colors.primary_text || '#ccc',
+  });
   const {
     type,
     color,
@@ -107,22 +113,29 @@ export default (props: RnTextProps) => {
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: 'transparent',
-    textAlign: 'left',
-  },
-  centered: {
-    textAlign: 'center',
-  },
-  uppercase: {
-    textTransform: 'uppercase',
-  },
-  highlight: {
-    color: '#333333',
-    fontSize: 14,
-  },
-  notHighlight: {
-    color: undefined,
-  },
-});
+const styles = StyleSheet.create({});
+type CreStyle = {
+  textColor: string;
+};
+
+function createStyles({ textColor }: CreStyle) {
+  return StyleSheet.create({
+    container: {
+      backgroundColor: 'transparent',
+      textAlign: 'left',
+    },
+    centered: {
+      textAlign: 'center',
+    },
+    uppercase: {
+      textTransform: 'uppercase',
+    },
+    highlight: {
+      color: textColor,
+      fontSize: 14,
+    },
+    notHighlight: {
+      color: undefined,
+    },
+  });
+}
diff --git a/packages/core/src/Typography/S.tsx b/packages/core/src/Typography/S.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, Text, TextProps } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 const styles = StyleSheet.create({
   default: {
@@ -13,8 +15,10 @@ export interface SProps extends TextProps {
 }
 
 export default function S(props: SProps) {
+  const theme = useTheme<Theme>();
+  const textColor = theme.colors.primary_text || '#ccc';
   return (
-    <Text {...props} style={[styles.default, props.style]}>
+    <Text {...props} style={[styles.default, props.style, { color: textColor }]}>
       {props.children}
     </Text>
   );

diff --git a/packages/core/src/Typography/Strong.tsx b/packages/core/src/Typography/Strong.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, Text, TextProps } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 const styles = StyleSheet.create({
   default: {
@@ -13,8 +15,10 @@ export interface StrongProps extends TextProps {
 }
 
 export default function Strong(props: StrongProps) {
+  const theme = useTheme<Theme>();
+  const textColor = theme.colors.primary_text || '#ccc';
   return (
-    <Text {...props} style={[styles.default, props.style]}>
+    <Text {...props} style={[styles.default, props.style, { color: textColor }]}>
       {props.children}
     </Text>
   );

diff --git a/packages/core/src/Typography/U.tsx b/packages/core/src/Typography/U.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StyleSheet, Text, TextProps } from 'react-native';
+import { Theme } from '../theme';
+import { useTheme } from '@shopify/restyle';
 
 const styles = StyleSheet.create({
   default: {
@@ -13,8 +15,10 @@ export interface UProps extends TextProps {
 }
 
 export default function U(props: UProps) {
+  const theme = useTheme<Theme>();
+  const textColor = theme.colors.primary_text || '#ccc';
   return (
-    <Text {...props} style={[styles.default, props.style]}>
+    <Text {...props} style={[styles.default, props.style, { color: textColor }]}>
       {props.children}
     </Text>
   );