fix(ds): dark-parity for bespoke green status badges (#2142)

* fix(ds): dark-parity for bespoke green status badges (#2134)

The status/type badges in recurring transactions, admin SSO providers, and the
categorize group title used solid light-green tints (bg-green-50/100 +
text-green-700/800) with no dark variant, so they rendered as pale "stickers"
on dark. Add theme-dark variants mirroring DS::Pill's soft recipe
(bg-green-tint-10 + text-green-200); dark text contrast 9.5-14.2:1. Their
neutral siblings were already token-based.

Audit-named _status_pill / _maturity_badge already render via DS::Pill;
remaining solid-tint spots are alpha icon-containers (bg-*-500/5,/10) that
composite fine on dark. Full DS::Pill consolidation tracked separately.

* fix(ds): dark-parity for bespoke amber/blue notices + SSO badge (#2134)

Continues the bespoke-badge tail: the raw-amber warning notices (securities
SSO warning, admin SSO legacy-providers notice) + the env-configured badge,
and the AI tool-call info box, were solid light tints (bg-amber-50/100 /
bg-blue-50) with no dark variant -> pale "stickers" on dark. Add theme-dark
variants mirroring the soft recipe: alpha-tint bg (amber/blue-500/10-15),
lightened border, light text/icon (amber-200/400). Verified legible on dark.

Pre-auth (sessions/new) + infra (redis error) amber notices render light-only,
left as-is. Broader: these warning boxes want a shared DS notice/callout
component (#2137).
This commit is contained in:
Guillem Arias Fauste
2026-06-08 21:40:22 +02:00
committed by GitHub
parent d845e44ff8
commit 4e0da0c237
5 changed files with 11 additions and 11 deletions

View File

@@ -26,7 +26,7 @@
</div>
<div class="flex items-center gap-2">
<% if provider.enabled? %>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 theme-dark:bg-green-tint-10 theme-dark:text-green-200">
<%= t(".enabled") %>
</span>
<% else %>
@@ -64,10 +64,10 @@
<% if @legacy_providers.any? %>
<%= settings_section title: t("admin.sso_providers.index.legacy_providers_title"), collapsible: true, open: true do %>
<div class="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4">
<div class="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4 theme-dark:bg-amber-500/10 theme-dark:border-amber-500/30">
<div class="flex gap-2">
<%= icon "alert-triangle", class: "w-5 h-5 text-amber-600 shrink-0" %>
<p class="text-sm text-amber-800">
<%= icon "alert-triangle", class: "w-5 h-5 text-amber-600 shrink-0 theme-dark:text-amber-400" %>
<p class="text-sm text-amber-800 theme-dark:text-amber-200">
<%= t("admin.sso_providers.index.legacy_providers_notice") %>
</p>
</div>
@@ -90,7 +90,7 @@
</div>
</div>
<div class="flex items-center gap-2">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800 theme-dark:bg-amber-500/15 theme-dark:text-amber-200">
<%= t("admin.sso_providers.index.env_configured") %>
</span>
</div>

View File

@@ -8,7 +8,7 @@
<div class="mt-2">
<% message.tool_calls.each do |tool_call| %>
<div class="bg-blue-50 border-blue-200 px-3 py-2 rounded-lg border mb-2">
<div class="bg-blue-50 border-blue-200 px-3 py-2 rounded-lg border mb-2 theme-dark:bg-blue-500/10 theme-dark:border-blue-500/30">
<p class="text-secondary text-xs"><%= t(".function") %></p>
<p class="text-primary text-sm font-mono"><%= tool_call.function_name %></p>
<p class="text-secondary text-xs mt-2"><%= t(".arguments") %></p>

View File

@@ -155,7 +155,7 @@
</td>
<td class="py-3 px-2 text-sm">
<% if recurring_transaction.active? %>
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-50 text-success">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-50 text-success theme-dark:bg-green-tint-10">
<%= t("recurring_transactions.status.active") %>
</span>
<% else %>

View File

@@ -160,10 +160,10 @@
<% end %>
</div>
<% if @oidc_identities.count == 1 && Current.user.password_digest.blank? %>
<div class="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg">
<div class="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg theme-dark:bg-amber-500/10 theme-dark:border-amber-500/30">
<div class="flex items-start gap-2">
<%= icon "alert-triangle", class: "w-5 h-5 text-amber-600 shrink-0 mt-0.5" %>
<p class="text-sm text-amber-800"><%= t(".sso_warning_message") %></p>
<%= icon "alert-triangle", class: "w-5 h-5 text-amber-600 shrink-0 mt-0.5 theme-dark:text-amber-400" %>
<p class="text-sm text-amber-800 theme-dark:text-amber-200"><%= t(".sso_warning_message") %></p>
</div>
</div>
<% end %>

View File

@@ -2,7 +2,7 @@
<div class="flex items-center gap-2">
<h2 class="text-lg font-semibold text-primary"><%= display_name %></h2>
<% if transaction_type == "income" %>
<span class="text-xs font-medium px-1.5 py-0.5 rounded-full bg-green-100 text-green-700"><%= t("transactions.categorizes.show.type_income") %></span>
<span class="text-xs font-medium px-1.5 py-0.5 rounded-full bg-green-100 text-green-700 theme-dark:bg-green-tint-10 theme-dark:text-green-200"><%= t("transactions.categorizes.show.type_income") %></span>
<% elsif transaction_type == "expense" %>
<span class="text-xs font-medium px-1.5 py-0.5 rounded-full bg-surface text-secondary border border-primary"><%= t("transactions.categorizes.show.type_expense") %></span>
<% end %>