style: consistent badges with sufficient color contrast

lib/mv_web/live/role_live/helpers.ex

@@ -18,6 +18,8 @@ defmodule MvWeb.RoleLive.Helpers do
 
   @doc """
   Returns the CSS badge class for a permission set name.
+
+  Deprecated for new code: prefer `permission_set_badge_variant/1` with <.badge>.
   """
   @spec permission_set_badge_class(String.t()) :: String.t()
   def permission_set_badge_class("own_data"), do: "badge badge-neutral badge-sm"
@@ -26,6 +28,18 @@ defmodule MvWeb.RoleLive.Helpers do
   def permission_set_badge_class("admin"), do: "badge badge-error badge-sm"
   def permission_set_badge_class(_), do: "badge badge-ghost badge-sm"
 
+  @doc """
+  Returns the Core Components badge variant for a permission set name (WCAG-compliant).
+
+  Use with <.badge variant={permission_set_badge_variant(permission_set_name)} size="sm">.
+  """
+  @spec permission_set_badge_variant(String.t()) :: :neutral | :info | :success | :error
+  def permission_set_badge_variant("own_data"), do: :neutral
+  def permission_set_badge_variant("read_only"), do: :info
+  def permission_set_badge_variant("normal_user"), do: :success
+  def permission_set_badge_variant("admin"), do: :error
+  def permission_set_badge_variant(_), do: :neutral
+
   @doc """
   Builds Ash options with actor and domain, ensuring actor is never nil in real paths.
   """

lib/mv_web/live/role_live/index.ex

@@ -22,7 +22,7 @@ defmodule MvWeb.RoleLive.Index do
   require Ash.Query
 
   import MvWeb.RoleLive.Helpers,
-    only: [format_error: 1, permission_set_badge_class: 1, opts_with_actor: 3]
+    only: [format_error: 1, permission_set_badge_variant: 1, opts_with_actor: 3]
 
   @impl true
   def mount(_params, _session, socket) do

lib/mv_web/live/role_live/index.html.heex

@@ -21,9 +21,9 @@
     <:col :let={role} label={gettext("Name")}>
       <div class="flex items-center gap-2">
         <span class="font-medium">{role.name}</span>
-        <%= if role.is_system_role do %>
-          <span class="badge badge-warning badge-sm">{gettext("System Role")}</span>
-        <% end %>
+        <.badge :if={role.is_system_role} variant="warning" size="sm">
+          {gettext("System Role")}
+        </.badge>
       </div>
     </:col>
 
@@ -36,21 +36,22 @@
     </:col>
 
     <:col :let={role} label={gettext("Permission Set")}>
-      <span class={permission_set_badge_class(role.permission_set_name)}>
+      <.badge variant={permission_set_badge_variant(role.permission_set_name)} size="sm">
         {role.permission_set_name}
-      </span>
+      </.badge>
     </:col>
 
     <:col :let={role} label={gettext("Type")}>
-      <%= if role.is_system_role do %>
-        <span class="badge badge-warning badge-sm">{gettext("System")}</span>
-      <% else %>
-        <span class="badge badge-ghost badge-sm">{gettext("Custom")}</span>
-      <% end %>
+      <.badge :if={role.is_system_role} variant="warning" size="sm">
+        {gettext("System")}
+      </.badge>
+      <.badge :if={!role.is_system_role} variant="neutral" size="sm">
+        {gettext("Custom")}
+      </.badge>
     </:col>
 
     <:col :let={role} label={gettext("Users")}>
-      <span class="badge badge-ghost">{get_user_count(role, @user_counts)}</span>
+      <.badge variant="neutral">{get_user_count(role, @user_counts)}</.badge>
     </:col>
 
     <:action :let={role}>

lib/mv_web/live/role_live/show.ex

@@ -17,7 +17,7 @@ defmodule MvWeb.RoleLive.Show do
   require Ash.Query
 
   import MvWeb.RoleLive.Helpers,
-    only: [format_error: 1, permission_set_badge_class: 1, opts_with_actor: 3]
+    only: [format_error: 1, permission_set_badge_variant: 1, opts_with_actor: 3]
 
   @impl true
   def mount(%{"id" => id}, _session, socket) do
@@ -196,16 +196,17 @@ defmodule MvWeb.RoleLive.Show do
           <% end %>
         </:item>
         <:item title={gettext("Permission Set")}>
-          <span class={permission_set_badge_class(@role.permission_set_name)}>
+          <.badge variant={permission_set_badge_variant(@role.permission_set_name)}>
             {@role.permission_set_name}
-          </span>
+          </.badge>
         </:item>
         <:item title={gettext("System Role")}>
-          <%= if @role.is_system_role do %>
-            <span class="badge badge-warning">{gettext("Yes")}</span>
-          <% else %>
-            <span class="badge badge-ghost">{gettext("No")}</span>
-          <% end %>
+          <.badge :if={@role.is_system_role} variant="warning">
+            {gettext("Yes")}
+          </.badge>
+          <.badge :if={!@role.is_system_role} variant="neutral">
+            {gettext("No")}
+          </.badge>
         </:item>
       </.list>
     </Layouts.app>