change the bg

assets/custom.css

@@ -32,10 +32,11 @@
 /* Removed any margin between consecutive .btn-secondary buttons */
 
 .hover-button {
-    background-color: transparent !important;
-    transition: background-color 0.2s ease-in-out;
+    border-width: 4px;
+    transition: border-color 0.2s ease-in-out;
 }
 
 .hover-button:hover {
-    background-color: var(--hover-bg) !important;
+    border-color: black !important;
+    /* Changes border to black on hover */
 }

src/callbacks/explanation_callbacks.py

@@ -5,8 +5,13 @@
 from dash.exceptions import PreventUpdate
 
 # Import any necessary functions
-from py_arg_visualisation.functions.import_functions.read_argumentation_framework_functions import read_argumentation_framework
-from py_arg_visualisation.functions.graph_data_functions.get_af_dot_string import get_numbered_grounded_extension
+from py_arg_visualisation.functions.import_functions.read_argumentation_framework_functions import (
+    read_argumentation_framework,
+)
+from py_arg_visualisation.functions.graph_data_functions.get_af_dot_string import (
+    get_numbered_grounded_extension,
+)
+
 
 # -- Callback for generating explanations --
 @callback(
@@ -23,7 +28,9 @@ def generate_explanations(arguments, attacks, active_item, selected_extension):
 
     # Read the argumentation framework and compute grounded status.
     arg_framework = read_argumentation_framework(arguments, attacks)
-    gr_status_by_arg, number_by_argument = get_numbered_grounded_extension(arg_framework)
+    gr_status_by_arg, number_by_argument = get_numbered_grounded_extension(
+        arg_framework
+    )
 
     def determine_hex_color(arg):
         """Return the hex color code based on the argument's status and extension membership."""
@@ -34,33 +41,30 @@ def determine_hex_color(arg):
             elif arg in selected_extension.get("red", []):
                 return "#ffe6c9"  # light-red
             elif arg in selected_extension.get("yellow", []):
-                return "#f1dd4b"  # using yellow as-is for undefined yellow
+                return "#FEFE62"  # yellow for undefined
             else:
                 return "#cccccc"  # fallback color
         else:
             if arg in selected_extension.get("green", []):
                 return "#40cfff"  # green
             elif arg in selected_extension.get("yellow", []):
-                return "#f1dd4b"  # yellow
+                return "#FEFE62"  # yellow
             elif arg in selected_extension.get("red", []):
                 return "#ffb763"  # red
             else:
                 return "#cccccc"  # fallback color
 
-    # Create a button for each argument.
-    # Each button starts with a transparent background and the computed color is stored in a CSS variable.
+    # Create a button for each argument with colored background and hover border effect
     all_argument_buttons = [
         dbc.Button(
             arg,
             id={"type": "argument-button-abstract", "index": arg},
-            className="hover-button",  # Custom class to enable hover behavior.
+            className="hover-button",  # Custom class for hover effect
             style={
                 "margin": "5px",
-                "backgroundColor": "transparent",       # Initial background is transparent.
-                "borderWidth": "4px",
-                "borderColor": determine_hex_color(arg),  # Border stays with the computed hex color.
-                "color": "black",                         # Text color (adjust as needed).
-                "--hover-bg": determine_hex_color(arg),   # Custom CSS variable to hold the hover color.
+                "backgroundColor": determine_hex_color(arg),  # Set background color
+                "border": f"4px solid {determine_hex_color(arg)}",  # Border matches color
+                "color": "black",  # Text color
             },
         )
         for arg in sorted(arguments.split("\n"))