mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 07:49:01 +00:00
f0c9490c09
The status pill on the goal card used a 10%-alpha fill (bg-warning/10, bg-green-500/10). On the card's hover state (bg-surface-hover) the fill blended into the new background and the pill lost its tint outline. Extend DS::Pill with a green tone and an optional icon: param (renders a Lucide icon in place of the dot) so the same primitive can carry both the beta marker and the goal status badges. Map Goals::StatusPillComponent to DS::Pill outline style — transparent fill + colored border + colored text + glyph — which is immune to any change in the surrounding card bg. One badge primitive, light-mode contrast already fixed (the color-mix 30% darkening on text), and the card hover state no longer washes out the status.
21 lines
984 B
Plaintext
21 lines
984 B
Plaintext
<% if dot_only %>
|
|
<%# Compact dot — no label, no border, just the colored marker. Used on the
|
|
collapsed sidebar nav. Keeps tone semantics without taking up label
|
|
width. %>
|
|
<span role="img"
|
|
class="inline-block shrink-0 align-middle rounded-full"
|
|
style="width: <%= dot_size_px %>px; height: <%= dot_size_px %>px; background-color: <%= dot_color %>;"
|
|
aria-label="<%= title || t("ds.pill.aria_label", label: label) %>"
|
|
title="<%= title || t("ds.pill.aria_label", label: label) %>"></span>
|
|
<% else %>
|
|
<span class="<%= container_classes %>" style="<%= container_styles %>" title="<%= title || label %>">
|
|
<% if icon %>
|
|
<%= helpers.icon(icon, size: "xs", color: "current") %>
|
|
<% elsif show_dot %>
|
|
<span class="inline-block shrink-0 rounded-full"
|
|
style="width: <%= dot_size_px %>px; height: <%= dot_size_px %>px; background-color: <%= dot_color %>;"></span>
|
|
<% end %>
|
|
<%= label %>
|
|
</span>
|
|
<% end %>
|