Files
sure/app/views/settings/hostings/_assistant_settings.html.erb
Guillem Arias Fauste 0fe1e06645 refactor(design-system): migrate fg-* utilities to text-* and remove namespace (#1626)
* 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.
2026-05-04 00:50:52 +02:00

113 lines
5.3 KiB
Plaintext

<div class="space-y-4">
<div>
<h2 class="font-medium mb-1"><%= t(".title") %></h2>
<% if ENV["ASSISTANT_TYPE"].present? %>
<p class="text-sm text-secondary"><%= t(".env_notice", type: ENV["ASSISTANT_TYPE"]) %></p>
<% else %>
<p class="text-secondary text-sm mb-4"><%= t(".description") %></p>
<% end %>
</div>
<% effective_type = ENV["ASSISTANT_TYPE"].presence || Current.family.assistant_type %>
<%= styled_form_with model: Current.family,
url: settings_hosting_path,
method: :patch,
class: "space-y-4",
data: {
controller: "auto-submit-form",
"auto-submit-form-trigger-event-value": "change"
} do |form| %>
<%= form.select :assistant_type,
options_for_select(
[
[t(".type_builtin"), "builtin"],
[t(".type_external"), "external"]
],
effective_type
),
{ label: t(".type_label") },
{ disabled: ENV["ASSISTANT_TYPE"].present?,
data: { "auto-submit-form-target": "auto" } } %>
<% end %>
<% if effective_type == "external" %>
<div class="flex items-center gap-2 text-sm mb-4">
<% if Assistant::External.configured? %>
<span class="inline-block w-2 h-2 rounded-full bg-success"></span>
<span class="text-secondary"><%= t(".external_configured") %></span>
<% else %>
<span class="inline-block w-2 h-2 rounded-full bg-destructive"></span>
<span class="text-secondary"><%= t(".external_not_configured") %></span>
<% end %>
</div>
<% if ENV["EXTERNAL_ASSISTANT_URL"].present? && ENV["EXTERNAL_ASSISTANT_TOKEN"].present? %>
<p class="text-sm text-secondary"><%= t(".env_configured_external") %></p>
<% end %>
<% if Assistant::External.configured? && !ENV["EXTERNAL_ASSISTANT_URL"].present? %>
<div class="flex items-center justify-between p-3 rounded-lg border border-primary">
<div>
<p class="text-sm font-medium text-primary"><%= t(".disconnect_title") %></p>
<p class="text-xs text-secondary"><%= t(".disconnect_description") %></p>
</div>
<%= button_to t(".disconnect_button"),
disconnect_external_assistant_settings_hosting_path,
method: :delete,
class: "bg-red-600 text-inverse text-sm font-medium rounded-lg px-4 py-2 whitespace-nowrap",
data: { turbo_confirm: {
title: t(".confirm_disconnect.title"),
body: t(".confirm_disconnect.body"),
accept: t(".disconnect_button"),
acceptClass: "w-full bg-red-600 text-inverse rounded-xl text-center p-[10px] border mb-2"
}} %>
</div>
<% end %>
<%= styled_form_with model: Setting.new,
url: settings_hosting_path,
method: :patch,
class: "space-y-4",
data: {
controller: "auto-submit-form",
"auto-submit-form-trigger-event-value": "blur"
} do |form| %>
<%= form.text_field :external_assistant_url,
label: t(".url_label"),
placeholder: t(".url_placeholder"),
value: Assistant::External.config.url,
autocomplete: "off",
autocapitalize: "none",
spellcheck: "false",
inputmode: "url",
disabled: ENV["EXTERNAL_ASSISTANT_URL"].present?,
data: { "auto-submit-form-target": "auto" } %>
<p class="text-xs text-secondary mt-1"><%= t(".url_help") %></p>
<%= form.password_field :external_assistant_token,
label: t(".token_label"),
placeholder: t(".token_placeholder"),
value: (Assistant::External.config.token.present? ? "********" : nil),
autocomplete: "off",
autocapitalize: "none",
spellcheck: "false",
inputmode: "text",
disabled: ENV["EXTERNAL_ASSISTANT_TOKEN"].present?,
data: { "auto-submit-form-target": "auto" } %>
<p class="text-xs text-secondary mt-1"><%= t(".token_help") %></p>
<%= form.text_field :external_assistant_agent_id,
label: t(".agent_id_label"),
placeholder: t(".agent_id_placeholder"),
value: Assistant::External.config.agent_id,
autocomplete: "off",
autocapitalize: "none",
spellcheck: "false",
inputmode: "text",
disabled: ENV["EXTERNAL_ASSISTANT_AGENT_ID"].present?,
data: { "auto-submit-form-target": "auto" } %>
<p class="text-xs text-secondary mt-1"><%= t(".agent_id_help") %></p>
<% end %>
<% end %>
</div>