feat: Add color theme support in text props (#61)

pancakeswap · Nov 17, 2020 · 2bbc200 · 2bbc200
1 parent 7efc22b
commit 2bbc200
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/ResetCSS.tsx b/src/ResetCSS.tsx
@@ -64,7 +64,7 @@ const ResetCSS = createGlobalStyle`
     box-sizing: border-box;
   }
   * {
-    font-family: 'Noto Sans', "Helvetica Neue", Arial, sans-serif;
+    font-family: 'Kanit', sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }

diff --git a/src/components/Text/index.stories.tsx b/src/components/Text/index.stories.tsx
@@ -45,6 +45,7 @@ export const Default: React.FC = () => {
       <Text bold>Bold text</Text>
       <Text fontSize="24px">Custom fontsize</Text>
       <Text color="red">Custom color</Text>
+      <Text color="primary">Custom color from theme</Text>
     </div>
   );
 };
diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx
@@ -1,5 +1,6 @@
 import styled, { DefaultTheme } from "styled-components";
 import { space, SpaceProps } from "styled-system";
+import getThemeValue from "../../util/getThemeValue";
 
 export interface Props extends SpaceProps {
   color?: string;
@@ -12,7 +13,7 @@ interface ThemedProps extends Props {
 }
 
 const getColor = ({ color, theme }: ThemedProps) => {
-  return color || theme.colors.text;
+  return getThemeValue(`colors.${color}`, color)(theme);
 };
 
 const getFontSize = ({ fontSize }: Props) => {
@@ -27,4 +28,8 @@ const Text = styled.div<Props>`
   ${space}
 `;
 
+Text.defaultProps = {
+  color: "text",
+};
+
 export default Text;