mirror of
https://github.com/we-promise/sure.git
synced 2026-05-09 05:35:00 +00:00
0fe1e06645
* refactor(design-system): migrate fg-* utilities to text-* and remove namespace
The design system carried two parallel namespaces for foreground colors:
text-* (canonical, ~2,000 uses) and fg-* (32 uses). Most fg-* tokens
were 1:1 duplicates of a text-* counterpart. fg-gray was nearly
identical to text-secondary, with a one-step shade difference in dark
mode.
This PR migrates all 32 usages to their text-* equivalents and removes
the fg-* block from the design tokens. Closes #1606.
Mapping:
- fg-inverse -> text-inverse (20 usages, identical light/dark values)
- fg-gray -> text-secondary (7 usages; light values match, dark is
one step lighter: gray-300 vs gray-400)
- fg-primary -> text-primary (3 usages, identical values)
- fg-subdued -> text-subdued (2 usages, identical values)
The four other fg-* tokens (fg-contrast, fg-primary-variant,
fg-secondary, fg-secondary-variant) had zero usages despite being
defined; they are removed without replacement.
JSON / build:
- design/tokens/sure.tokens.json: $version 1.0.0 -> 2.0.0 (breaking
schema change per the policy added in #1620). 8 fg-* token
definitions removed.
- button-bg-ghost-hover's dark value still references "fg-inverse"
internally; rewritten to "bg-gray-800 text-inverse" so the cleanup
doesn't break that utility.
- _generated.css regenerated. 42 utility blocks now (was 50).
Lookbook tokens preview:
- The Text & foregrounds section dropped its split between text-*
(canonical) and fg-* (legacy). Now a single section listing the
five text-* utilities. The "(legacy)" framing is gone since there's
no legacy left.
README:
- design/tokens/README.md's button-bg-ghost-hover edge-case example
updated to reflect the new "bg-gray-800 text-inverse" dark value.
Visual review needed in dark mode:
- Anywhere icons use the application_helper#icon helper with
color: "default" (most icons in the app). The default class moved
from fg-gray (gray-400 dark) to text-secondary (gray-300 dark), so
default-color icons render slightly lighter in dark mode.
- DS::Buttonish icons in secondary buttons (same shade shift).
- DS::Link icons (same).
- Time series chart axes (same).
- All tooltips, account add flow, settings hostings buttons,
invitations, AI consent, family export, danger-zone buttons --
these used fg-inverse, which is identical to text-inverse, so no
visual change expected.
* fix(design-system): use inverse pair on tooltips for readable dark mode
* fix(lookbook): use semantic tokens in menu preview header text
* fix(lookbook): set text-primary on layout body so previews inherit theme
* fix(design-system): keep shadows dark-toned in dark mode
Inverting shadows to white|8% on dark surfaces produces a halo
effect rather than an elevation cue, and stacks redundantly with
the alpha-white 1px ring already in shadow-border-*.
Switch dark-mode shadows to black at progressively higher alpha
(25%/30%/35%/40%/50% for xs..xl) so they read as actual cast
shadows on near-black surfaces. Surface-tint differences and the
existing alpha-white border ring continue to handle elevation
hierarchy and edge definition.
Approach matches Material 3, Apple HIG, IBM Carbon, Refactoring UI,
and the dark-mode shadows used in Linear/Vercel/Stripe.
* fix(design-system): set text-primary on DS::Dialog element
Browser UA stylesheets apply color: black directly to <dialog>,
which overrides ancestor inheritance even when a body or html
ancestor sets a theme-aware color. Unstyled child content then
renders black regardless of theme.
Setting text-primary on the dialog element itself defeats the UA
override and lets descendants inherit the semantic token.
* fix(lookbook): use shadow css vars in effects preview so dark theme renders
* Revert "fix(design-system): keep shadows dark-toned in dark mode"
This reverts commit 3e9d76ed0b.
* fix(design-system): use opacity-70 instead of text-inverse/70 in value tooltip
The custom @utility text-inverse expands to @apply text-white and
isn't modifier-aware, so text-inverse/70 produced no CSS at all and
the muted labels fell through to inherited color (invisible on the
white pill in dark mode).
Replace with text-inverse + opacity-70. Same visual effect, works
with the existing utility definition.
190 lines
8.9 KiB
Plaintext
190 lines
8.9 KiB
Plaintext
<%= content_for :page_title, t(".page_title") %>
|
|
|
|
<%= settings_section title: t(".profile_title"), subtitle: t(".profile_subtitle", product_name: product_name) do %>
|
|
<%= styled_form_with model: @user, url: user_path(@user), class: "space-y-4" do |form| %>
|
|
<%= render "settings/user_avatar_field", form: form, user: @user %>
|
|
|
|
<div>
|
|
<%= form.email_field :email, placeholder: t(".email"), label: t(".email") %>
|
|
|
|
<% if @user.unconfirmed_email.present? %>
|
|
<p class="mt-2 text-sm text-gray-600">
|
|
You have requested to change your email to <%= @user.unconfirmed_email %>. Please go to your email and confirm for the change to take effect. If you haven't received the email, please check your spam folder, or <%= link_to "request a new confirmation email", resend_confirmation_email_user_path(@user), class: "hover:underline text-secondary" %>.
|
|
</p>
|
|
<% end %>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
|
|
<%= form.text_field :first_name, placeholder: t(".first_name"), label: t(".first_name") %>
|
|
<%= form.text_field :last_name, placeholder: t(".last_name"), label: t(".last_name") %>
|
|
</div>
|
|
|
|
<div class="flex justify-end mt-4">
|
|
<%= render DS::Button.new(text: t(".save"), class: "md:w-auto w-full justify-center") %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% unless Current.user.ui_layout_intro? %>
|
|
<%= settings_section title: family_moniker == "Group" ? t(".group_title", default: "Group") : t(".household_title"), subtitle: t(".household_subtitle", moniker_plural: family_moniker_plural_downcase, moniker: family_moniker_downcase) do %>
|
|
<div class="space-y-4">
|
|
<%= styled_form_with model: Current.user, class: "space-y-4", data: { controller: "auto-submit-form" } do |form| %>
|
|
<%= form.fields_for :family do |family_fields| %>
|
|
<% name_label = family_moniker == "Group" ? t(".group_form_label", default: "Group name") : t(".household_form_label") %>
|
|
<% name_placeholder = family_moniker == "Group" ? t(".group_form_input_placeholder", default: "Enter group name") : t(".household_form_input_placeholder") %>
|
|
<%= family_fields.text_field :name,
|
|
placeholder: name_placeholder,
|
|
label: name_label,
|
|
disabled: !Current.user.admin?,
|
|
"data-auto-submit-form-target": "auto" %>
|
|
<% end %>
|
|
<% end %>
|
|
<div class="bg-container-inset rounded-xl p-1">
|
|
<div class="px-4 py-2">
|
|
<p class="uppercase text-xs text-secondary font-medium"><%= Current.family.name %> · <%= Current.family.users.size %></p>
|
|
</div>
|
|
<% @users.each do |user| %>
|
|
<div class="flex gap-2 mt-2 items-center bg-container p-4 shadow-border-xs rounded-lg">
|
|
<div class="w-9 h-9 shrink-0">
|
|
<%= render "settings/user_avatar", avatar_url: user.profile_image&.variant(:small)&.url, initials: user.initials %>
|
|
</div>
|
|
<p class="text-primary font-medium text-sm"><%= user.display_name %></p>
|
|
<div class="rounded-md bg-surface px-1.5 py-0.5">
|
|
<p class="uppercase text-secondary font-medium text-xs"><%= user.role %></p>
|
|
</div>
|
|
<% if Current.user.admin? && user != Current.user %>
|
|
<div class="ml-auto">
|
|
<%= render DS::Button.new(
|
|
variant: "icon",
|
|
icon: "x",
|
|
href: settings_profile_path(user_id: user),
|
|
method: :delete,
|
|
confirm: CustomConfirm.for_resource_deletion(user.display_name, high_severity: true)
|
|
) %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
<% if @pending_invitations.any? %>
|
|
<% @pending_invitations.each do |invitation| %>
|
|
<div class="flex gap-2 items-center justify-between bg-container p-4 border border-alpha-black-25 rounded-lg">
|
|
<div class="flex gap-2 items-center">
|
|
<div class="w-9 h-9 shrink-0">
|
|
<div class="text-inverse w-full h-full bg-surface-inset rounded-full flex items-center justify-center text-lg uppercase"><%= invitation.email[0] %></div>
|
|
</div>
|
|
<div class="flex">
|
|
<p class="text-primary font-medium text-sm"><%= invitation.email %></p>
|
|
<div class="rounded-md bg-surface px-1.5 py-0.5">
|
|
<p class="uppercase text-secondary font-medium text-xs"><%= t(".pending") %></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<% if self_hosted? %>
|
|
<div class="flex items-center gap-2" data-controller="clipboard">
|
|
<p class="text-secondary text-sm"><%= t(".invitation_link") %></p>
|
|
<span data-clipboard-target="source" class="hidden"><%= accept_invitation_url(invitation.token) %></span>
|
|
<input type="text"
|
|
readonly
|
|
autocomplete="off"
|
|
value="<%= accept_invitation_url(invitation.token) %>"
|
|
class="text-sm bg-gray-50 px-2 py-1 rounded border border-secondary w-72">
|
|
<button data-action="clipboard#copy" class="text-secondary hover:text-gray-700">
|
|
<span data-clipboard-target="iconDefault">
|
|
<%= icon "copy" %>
|
|
</span>
|
|
<span class="hidden" data-clipboard-target="iconSuccess">
|
|
<%= icon "check" %>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% if Current.user.admin? %>
|
|
<%= render DS::Button.new(
|
|
variant: "icon",
|
|
icon: "x",
|
|
href: invitation_path(invitation),
|
|
method: :delete,
|
|
confirm: CustomConfirm.for_resource_deletion(invitation.email, high_severity: true)
|
|
) %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
<% if Current.user.admin? %>
|
|
<%= link_to new_invitation_path,
|
|
class: "bg-container-inset flex items-center justify-center gap-2 text-secondary mt-1 hover:bg-container-inset-hover rounded-lg px-4 py-2 w-full text-center",
|
|
data: { turbo_frame: :modal } do %>
|
|
<%= icon("plus") %>
|
|
<%= t(".invite_member") %>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<%= settings_section title: t(".danger_zone_title") do %>
|
|
<div class="space-y-4">
|
|
<% if Current.user.admin? %>
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|
<div class="w-full md:w-2/3">
|
|
<h3 class="font-medium text-primary"><%= t(".reset_account") %></h3>
|
|
<p class="text-secondary text-sm"><%= t(".reset_account_warning") %></p>
|
|
</div>
|
|
|
|
<%= render DS::Button.new(
|
|
text: t(".reset_account"),
|
|
variant: "destructive",
|
|
href: reset_user_path(@user),
|
|
method: :delete,
|
|
confirm: CustomConfirm.new(
|
|
title: t(".confirm_reset.title"),
|
|
body: t(".confirm_reset.body"),
|
|
btn_text: t(".reset_account"),
|
|
destructive: true,
|
|
high_severity: true
|
|
)
|
|
) %>
|
|
</div>
|
|
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|
<div class="w-full md:w-2/3">
|
|
<h3 class="font-medium text-primary"><%= t(".reset_account_with_sample_data") %></h3>
|
|
<p class="text-secondary text-sm"><%= t(".reset_account_with_sample_data_warning") %></p>
|
|
</div>
|
|
|
|
<%= render DS::Button.new(
|
|
text: t(".reset_account_with_sample_data"),
|
|
variant: "destructive",
|
|
href: reset_with_sample_data_user_path(@user),
|
|
method: :delete,
|
|
confirm: CustomConfirm.new(
|
|
title: t(".confirm_reset_with_sample_data.title"),
|
|
body: t(".confirm_reset_with_sample_data.body"),
|
|
btn_text: t(".reset_account_with_sample_data"),
|
|
destructive: true,
|
|
high_severity: true
|
|
)
|
|
) %>
|
|
</div>
|
|
<% end %>
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
|
<div class="w-full md:w-2/3">
|
|
<h3 class="font-medium text-primary"><%= t(".delete_account") %></h3>
|
|
<p class="text-secondary text-sm"><%= t(".delete_account_warning") %></p>
|
|
</div>
|
|
|
|
<%= render DS::Button.new(
|
|
text: t(".delete_account"),
|
|
variant: "destructive",
|
|
href: user_path(@user),
|
|
method: :delete,
|
|
confirm: CustomConfirm.for_resource_deletion("your account", high_severity: true)
|
|
) %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|