From 2ca6b2cf4c4718bf6fa9b588eca1f607392fcb6e Mon Sep 17 00:00:00 2001
From: Ricardo Casares <ricardocasares@gmail.com>
Date: Mon, 2 Nov 2020 10:32:44 +0100
Subject: [PATCH] fix: use layers

---
 src/components/Logo/index.tsx | 2 ++
 src/css/global.ts             | 9 ++++++---
 src/css/reset.ts              | 1 -
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Logo/index.tsx b/src/components/Logo/index.tsx
index 0148305d..45d3f5e5 100644
--- a/src/components/Logo/index.tsx
+++ b/src/components/Logo/index.tsx
@@ -25,6 +25,7 @@ export const Logo = () => {
           stroke: "var(--accents-4)",
           transform: `scale(${opacity})`,
           transformOrigin: "center",
+          willChange: "transform, stroke",
         }}
       />
       <path
@@ -32,6 +33,7 @@ export const Logo = () => {
         style={{
           opacity,
           stroke: "var(--success)",
+          willChange: "opacity",
         }}
       />
     </svg>
diff --git a/src/css/global.ts b/src/css/global.ts
index 05a05c8d..f68bb31c 100644
--- a/src/css/global.ts
+++ b/src/css/global.ts
@@ -11,13 +11,16 @@ export const styles = css`
     min-height: 100%;
   }
 
-  body,
-  input,
-  button {
+  *,
+  *::before,
+  *::after {
     font-family: var(--font-family);
+    will-change: color, background;
+    transition: color 0.1s, background 0.3s, border-color 0.3s;
   }
 
   body {
+    font-size: 16px;
     color: var(--foreground);
     background: var(--background);
     margin: 0;
diff --git a/src/css/reset.ts b/src/css/reset.ts
index 6856a936..22e6a44e 100644
--- a/src/css/reset.ts
+++ b/src/css/reset.ts
@@ -57,7 +57,6 @@ export const reset = css`
   *::before,
   *::after {
     box-sizing: inherit;
-    transition: color 0.1s, background 0.3s, border-color 0.3s;
   }
 
   img,