From 5f9ec5e9927ea83612cdf8c35b2077ee76a0d1f3 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Tue, 31 Aug 2021 03:44:26 -0300
Subject: [PATCH 1/2] Start theme extraction work; extract from/to colors

---
 src/components/DecoratedAddressLink.tsx | 12 +++++++-----
 src/index.css                           |  9 +++++++++
 src/transaction/Details.tsx             |  4 ++--
 tailwind.config.js                      | 25 +++++++++++++++++++++++++
 4 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx
index a325343..0b38fab 100644
--- a/src/components/DecoratedAddressLink.tsx
+++ b/src/components/DecoratedAddressLink.tsx
@@ -41,11 +41,13 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
 
   return (
     <div
-      className={`flex items-baseline space-x-1 ${txFrom ? "bg-red-50" : ""} ${
-        txTo ? "bg-green-50" : ""
-      } ${mint ? "italic text-green-500 hover:text-green-700" : ""} ${
-        burn ? "line-through text-orange-500 hover:text-orange-700" : ""
-      } ${selfDestruct ? "line-through opacity-70 hover:opacity-100" : ""}`}
+      className={`flex items-baseline space-x-1 ${
+        txFrom ? "bg-skin-from" : ""
+      } ${txTo ? "bg-skin-to" : ""} ${
+        mint ? "italic text-green-500 hover:text-green-700" : ""
+      } ${burn ? "line-through text-orange-500 hover:text-orange-700" : ""} ${
+        selfDestruct ? "line-through opacity-70 hover:opacity-100" : ""
+      }`}
     >
       {creation && (
         <span className="text-yellow-300" title="Contract creation">
diff --git a/src/index.css b/src/index.css
index b5c61c9..9333e63 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,12 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --color-from-border: 254, 226, 226;
+    --color-from-text: 220, 38, 38;
+    --color-from-fill: 254, 242, 242;
+    --color-to-fill: 236, 253, 245;
+  }
+}
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 1f3cd65..6f46e7f 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -176,7 +176,7 @@ const Details: React.FC<DetailsProps> = ({
       <InfoRow title="Value">
         <FormattedBalance value={txData.value} /> Ether{" "}
         {!txData.value.isZero() && ethUSDPrice && (
-          <span className="px-2 border-red-100 border rounded-lg bg-red-50 text-red-600">
+          <span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
             <ETH2USDValue ethAmount={txData.value} eth2USDValue={ethUSDPrice} />
           </span>
         )}
@@ -266,7 +266,7 @@ const Details: React.FC<DetailsProps> = ({
           <div>
             <FormattedBalance value={txData.fee} /> Ether{" "}
             {ethUSDPrice && (
-              <span className="px-2 border-red-100 border rounded-lg bg-red-50 text-red-600">
+              <span className="px-2 border-skin-from border rounded-lg bg-skin-from text-skin-from">
                 <ETH2USDValue
                   ethAmount={txData.fee}
                   eth2USDValue={ethUSDPrice}
diff --git a/tailwind.config.js b/tailwind.config.js
index 3f72cce..4289294 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,14 @@
 const colors = require("tailwindcss/colors");
 
+function withOpacity(variableName) {
+  return ({ opacityValue }) => {
+    if (opacityValue !== undefined) {
+      return `rgba(var(${variableName}), ${opacityValue})`;
+    }
+    return `rgb(var(${variableName}))`;
+  };
+}
+
 module.exports = {
   purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
   darkMode: false, // or 'media' or 'class'
@@ -19,6 +28,22 @@ module.exports = {
         balance: ["Fira Code"],
         blocknum: ["Roboto"],
       },
+      borderColor: {
+        skin: {
+          from: withOpacity("--color-from-border"),
+        },
+      },
+      textColor: {
+        skin: {
+          from: withOpacity("--color-from-text"),
+        },
+      },
+      backgroundColor: {
+        skin: {
+          from: withOpacity("--color-from-fill"),
+          to: withOpacity("--color-to-fill"),
+        },
+      },
     },
   },
   variants: {

From 9f778e6eba97312e5cce72d985cea19f8f51eaff Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Tue, 31 Aug 2021 04:02:26 -0300
Subject: [PATCH 2/2] Extract table bg hover theme color

---
 src/index.css                   | 2 ++
 src/search/TransactionItem.tsx  | 4 +++-
 src/special/london/BlockRow.tsx | 2 +-
 tailwind.config.js              | 1 +
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/index.css b/src/index.css
index 9333e63..6088bfb 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,5 +8,7 @@
     --color-from-text: 220, 38, 38;
     --color-from-fill: 254, 242, 242;
     --color-to-fill: 236, 253, 245;
+
+    --color-table-row-hover: 243, 244, 246;
   }
 }
diff --git a/src/search/TransactionItem.tsx b/src/search/TransactionItem.tsx
index 32aab32..f5196d8 100644
--- a/src/search/TransactionItem.tsx
+++ b/src/search/TransactionItem.tsx
@@ -56,7 +56,9 @@ const TransactionItem: React.FC<TransactionItemProps> = ({
   return (
     <div
       className={`grid grid-cols-12 gap-x-1 items-baseline text-sm border-t border-gray-200 ${
-        flash ? "bg-yellow-100 hover:bg-yellow-200" : "hover:bg-gray-100"
+        flash
+          ? "bg-yellow-100 hover:bg-yellow-200"
+          : "hover:bg-skin-table-hover"
       } px-2 py-3`}
     >
       <div className="col-span-2 flex space-x-1 items-baseline">
diff --git a/src/special/london/BlockRow.tsx b/src/special/london/BlockRow.tsx
index 8915417..df22a85 100644
--- a/src/special/london/BlockRow.tsx
+++ b/src/special/london/BlockRow.tsx
@@ -22,7 +22,7 @@ const BlockRow: React.FC<BlockRowProps> = ({ now, block, baseFeeDelta }) => {
   const totalReward = block.blockReward.add(netFeeReward ?? 0);
 
   return (
-    <div className="grid grid-cols-9 gap-x-2 px-3 py-2 hover:bg-gray-100">
+    <div className="grid grid-cols-9 gap-x-2 px-3 py-2 hover:bg-skin-table-hover">
       <div>
         <BlockLink blockTag={block.number} />
       </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 4289294..48964a3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -42,6 +42,7 @@ module.exports = {
         skin: {
           from: withOpacity("--color-from-fill"),
           to: withOpacity("--color-to-fill"),
+          "table-hover": withOpacity("--color-table-row-hover"),
         },
       },
     },