Start theme extraction work; extract from/to colors

This commit is contained in:
Willian Mitsuda 2021-08-31 03:44:26 -03:00
parent 9147cc226b
commit 5f9ec5e992
4 changed files with 43 additions and 7 deletions

View File

@ -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">

View File

@ -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;
}
}

View File

@ -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}

View File

@ -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: {