Dynamic darker hover color for button widget

Author: Navaneeth-pk

frontend/package.json

@@ -47,6 +47,7 @@
     "react-toastify": "^7.0.3",
     "react-tooltip": "^4.2.18",
     "rxjs": "^6.3.3",
+    "tinycolor2": "^1.4.2",
     "yup": "^0.27.0"
   },
   "devDependencies": {

frontend/src/Editor/Components/Button.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { resolveReferences } from '@/_helpers/utils';
+var tinycolor = require("tinycolor2");
 
 export const Button = function Button({
   id, width, height, component, onComponentClick, currentState
@@ -24,12 +25,13 @@ export const Button = function Button({
     backgroundColor,
     color,
     width,
-    height
+    height,
+    '--tblr-btn-color-darker': tinycolor(backgroundColor).darken(8).toString() 
   };
 
   return (
     <button
-      className={`btn btn-primary p-1 ${loadingState === true ? ' btn-loading' : ''}`}
+      className={`jet-button btn btn-primary p-1 ${loadingState === true ? ' btn-loading' : ''}`}
       style={computedStyles}
       onClick={() => onComponentClick(id, component)}
     >

frontend/src/_styles/theme.scss

@@ -1546,4 +1546,10 @@ input:focus-visible {
 
 .column-sort-row { 
   border-radius: 0;
-}
+}
+
+.jet-button {
+  &.btn-primary:hover {
+    background: var(--tblr-btn-color-darker) !important;
+  }
+}