Extract action button theme

src/Home.tsx

@@ -56,7 +56,7 @@ const Home: React.FC = () => {
             autoFocus
           />
           <button
-            className="border rounded-r bg-gray-100 hover:bg-gray-200 focus:outline-none px-2 py-1 text-base text-gray-500 flex justify-center items-center"
+            className="border rounded-r bg-skin-button-fill hover:bg-skin-button-hover-fill focus:outline-none px-2 py-1 text-base text-skin-button flex justify-center items-center"
             type="button"
             onClick={() => setScanning(true)}
             title="Scan an ETH address using your camera"
@@ -65,7 +65,7 @@ const Home: React.FC = () => {
           </button>
         </div>
         <button
-          className="mx-auto px-3 py-1 mb-10 rounded bg-gray-100 hover:bg-gray-200 focus:outline-none"
+          className="mx-auto px-3 py-1 mb-10 rounded bg-skin-button-fill hover:bg-skin-button-hover-fill focus:outline-none"
           type="submit"
         >
           Search

src/Title.tsx

@@ -68,7 +68,7 @@ const Title: React.FC = () => {
               ref={searchRef}
             />
             <button
-              className="border bg-gray-100 hover:bg-gray-200 focus:outline-none px-2 py-1 text-sm text-gray-500"
+              className="border bg-skin-button-fill hover:bg-skin-button-hover-fill focus:outline-none px-2 py-1 text-sm text-skin-button"
               type="button"
               onClick={() => setScanning(true)}
               title="Scan an ETH address using your camera"
@@ -76,7 +76,7 @@ const Title: React.FC = () => {
               <FontAwesomeIcon icon={faQrcode} />
             </button>
             <button
-              className="rounded-r border-t border-b border-r bg-gray-100 hover:bg-gray-200 focus:outline-none px-2 py-1 text-sm text-gray-500"
+              className="rounded-r border-t border-b border-r bg-skin-button-fill hover:bg-skin-button-hover-fill focus:outline-none px-2 py-1 text-sm text-skin-button"
               type="submit"
             >
               Search

src/index.css

@@ -4,6 +4,10 @@
 
 @layer base {
   :root {
+    --color-button-fill: 244, 244, 245; /* gray-100 */
+    --color-button-hover-fill: 228, 228, 231; /* gray-200 */
+    --color-button-text: 113, 113, 122; /* gray-500 */
+
     --color-from-border: 254, 226, 226;
     --color-from-text: 220, 38, 38;
     --color-from-fill: 254, 242, 242;
@@ -12,6 +16,10 @@
     --color-table-row-hover: 243, 244, 246;
   }
   .test-theme {
+    --color-button-fill: 14, 165, 233; /* sky-500 */
+    --color-button-hover-fill: 56, 189, 248; /* sky-400 */
+    --color-button-text: 186, 230, 253; /* sky-200 */
+
     --color-from-border: 251, 146, 60;
     --color-from-text: 249, 115, 22;
     --color-from-fill: 254, 215, 170;

tailwind.config.js

@@ -35,11 +35,16 @@ module.exports = {
       },
       textColor: {
         skin: {
+          button: withOpacity("--color-button-text"),
+
           from: withOpacity("--color-from-text"),
         },
       },
       backgroundColor: {
         skin: {
+          "button-fill": withOpacity("--color-button-fill"),
+          "button-hover-fill": withOpacity("--color-button-hover-fill"),
+
           from: withOpacity("--color-from-fill"),
           to: withOpacity("--color-to-fill"),
           "table-hover": withOpacity("--color-table-row-hover"),