the typeface picker names the current face
"Default" told somebody nothing. The question they are asking of that dropdown is "what is it now, and what would I be changing it from" — so the empty option now reads "Martian Title (site default)", from the stylesheet that actually decides it. A label that refuses to answer makes people change the setting to find out, which is the one action that loses the answer. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -45,6 +45,14 @@ type Layout = {
|
||||
font_display: string | null;
|
||||
/** What the picker may offer — sent by the API so this file holds no third copy of the list. */
|
||||
fonts: string[];
|
||||
/**
|
||||
* Which face plays each role when nothing has been chosen, read from the site's own stylesheet.
|
||||
*
|
||||
* So the empty option can NAME the typeface instead of saying "Default". The question somebody is
|
||||
* actually asking of that dropdown is "what is it now" — and a label that does not answer it makes
|
||||
* them change the setting to find out, which is the one way to lose the answer.
|
||||
*/
|
||||
font_defaults: Record<string, string>;
|
||||
};
|
||||
|
||||
/** The four roles styles.css declares. A template asks for a role; this decides which face plays it. */
|
||||
@@ -107,9 +115,10 @@ export const LayoutPanel = () => {
|
||||
|
||||
/*
|
||||
Compared field by field rather than whole, because the payload carries something this does not own:
|
||||
`fonts` is the API saying which faces the build subsets, not a value anybody edits. Including it
|
||||
would be harmless today and wrong the first time a face is added — the panel would show unsaved
|
||||
changes for a decision made in the build script.
|
||||
`fonts` and `font_defaults` are the API describing the site — which faces the build subsets, and
|
||||
which one plays each role today — not values anybody edits here. Including them would be harmless
|
||||
today and wrong the first time either changed: the panel would show unsaved changes for a decision
|
||||
made in a build script or a stylesheet.
|
||||
*/
|
||||
const WRITABLE = [
|
||||
'background',
|
||||
@@ -225,10 +234,11 @@ export const LayoutPanel = () => {
|
||||
onChange={(event) => patch({ [key]: event.currentTarget.value || null } as Partial<Layout>)}
|
||||
className="h-8 rounded-md border border-input bg-transparent px-2 text-xs"
|
||||
>
|
||||
{/* "Default" is not a font. It means the stylesheet decides, which is what an
|
||||
untouched site already does — so choosing it puts things back rather than
|
||||
setting something new. */}
|
||||
<option value="">Default</option>
|
||||
{/* Not "Default" — the face the stylesheet actually uses, named. Choosing it puts
|
||||
things back rather than setting something new, and now you can see what back is. */}
|
||||
<option value="">
|
||||
{draft.font_defaults[key] ? `${draft.font_defaults[key]} (site default)` : 'Default'}
|
||||
</option>
|
||||
{draft.fonts.map((font) => (
|
||||
<option key={font} value={font}>
|
||||
{font}
|
||||
|
||||
Reference in New Issue
Block a user