feat: polished action border colors (#1180)

Author: lukasvinclav

src/unfold/static/unfold/css/styles.css

@@ -15,8 +15,23 @@
         {{ title }}
 
         {% if not link %}
-            <span class="material-symbols-outlined ml-auto rotate-90">
-                chevron_right
+            <span class="border-l border-base-200 flex items-center select-none self-stretch ml-1 -mr-1 -my-2 pl-2
+                         {% if action.variant.value == "primary" %}
+                             border-primary-700 dark:border-primary-500
+                         {% elif action.variant.value == "danger" %}
+                             border-red-700 dark:border-red-500
+                         {% elif action.variant.value == "success" %}
+                             border-green-700 dark:border-green-500
+                         {% elif action.variant.value == "info" %}
+                             border-blue-700 dark:border-blue-500
+                         {% elif action.variant.value == "warning" %}
+                             border-orange-700 dark:border-orange-500
+                         {% else %}
+                             border-base-200 dark:border-base-700
+                         {% endif %}">
+                <span class="material-symbols-outlined ml-auto rotate-90 transition-transform" x-bind:class="{'!-rotate-90': actionDropdownOpen }">
+                    chevron_right
+                </span>
             </span>
         {% endif %}
     </a>

src/unfold/templates/unfold/helpers/tab_action.html

@@ -438,48 +438,54 @@ def action_item_classes(context: Context, action: UnfoldAction) -> str:
     if variant == ActionVariant.PRIMARY:
         classes.extend(
             [
-                "border-primary-600",
+                "border-primary-700",
                 "bg-primary-600",
                 "text-white",
+                "dark:border-primary-500",
             ]
         )
     elif variant == ActionVariant.DANGER:
         classes.extend(
             [
-                "border-red-600",
+                "border-red-700",
                 "bg-red-600",
                 "text-white",
+                "dark:border-red-500",
             ]
         )
     elif variant == ActionVariant.SUCCESS:
         classes.extend(
             [
-                "border-green-600",
+                "border-green-700",
                 "bg-green-600",
                 "text-white",
+                "dark:border-green-500",
             ]
         )
     elif variant == ActionVariant.INFO:
         classes.extend(
             [
-                "border-blue-600",
+                "border-blue-700",
                 "bg-blue-600",
                 "text-white",
+                "dark:border-blue-500",
             ]
         )
     elif variant == ActionVariant.WARNING:
         classes.extend(
             [
-                "border-orange-600",
+                "border-orange-700",
                 "bg-orange-600",
                 "text-white",
+                "dark:border-orange-500",
             ]
         )
     else:
         classes.extend(
             [
                 "border-base-200",
                 "hover:text-primary-600",
+                "dark:hover:text-primary-500",
                 "dark:border-base-700",
             ]
         )