Styled Components + Google Fonts + Colors & Global Styles

constants/colors.js

@@ -0,0 +1,8 @@
+const Color = require("color-js");
+
+const Colors = {
+  black: Color("#000000"),
+  white: Color("#ffffff"),
+};
+
+export default Colors;

constants/globalStyles.js

@@ -0,0 +1,34 @@
+import { createGlobalStyle } from "styled-components";
+import Colors from "./colors";
+
+const GlobalStyle = createGlobalStyle`
+:root{
+    /* Colors */
+    --black: ${Colors.black.toCSS()};
+    --white: ${Colors.white.toCSS()};
+}
+* {
+  padding: 0;
+  margin: 0;
+}
+*,
+    input,
+    select,
+    textarea,
+    option,
+    button {
+      outline: none !important;
+    }
+    ::-moz-selection {
+      /* Code for Firefox */
+      color: var(--white);
+      background: #00fbff;
+    }
+    ::selection {
+      color: var(--black);
+      background: #02e3ff;
+    }
+    
+`;
+
+export default GlobalStyle;

containers/home.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+function Home() {
+    return (
+        <div>
+            <h1>Hola Cris</h1>
+            <p>Aca vamos a ir testeando</p>
+        </div>
+    );
+}
+
+export default Home;