bvandeusenandClaude Opus 5
6627cfc2f0
CI & Build / Python lint (push) Successful in 4s
CI & Build / Plugin hooks (push) Successful in 10s
CI & Build / integration (push) Successful in 32s
CI & Build / TypeScript typecheck (push) Successful in 34s
CI & Build / Python tests (push) Successful in 1m5s
CI & Build / Build & push image (push) Successful in 33s
Milestone 333 step 5, and rule 27 — the counter had a tuning point from step 4 and no operator-facing one until now. The task said to reuse the snippet badge's classes rather than mint a parallel set, citing the eight duplicated CSS families the ledger already carries (#3207). `.usage-tag` lived in SnippetListView's SCOPED block, so "reuse" was not available: copying it into the rule pane would have been the ninth family, and importing it is not a thing a scoped block permits. So it was promoted rather than copied. Three pieces, each of which existed once and now exists once: - `components.css` gains `.usage-tag` / `.usage-dead`, geometry and colour only, with the scoped original deleted rather than left behind. - `UsageBadge.vue` holds the logic the two lists would otherwise duplicate — the >=3 dead-weight threshold, the empty-string-renders-nothing rule, the tooltip. - `types/usage.ts` holds `RecordUsage`, one client type over two tables. `SnippetUsage` becomes an alias, so no existing consumer changes. THE ADVICE IS A PROP, and that is the substance rather than the plumbing. The counts read identically for every kind; the remedy does not. A snippet offered and never opened should probably be rewritten or deleted — one action. A rule in the same position has TWO possible causes and the operator has to pick: its trigger may fire on the wrong work, in which case `when_to_apply` wants rewording, or it may genuinely not be wanted. Baking "delete it" into the component would give the wrong nudge half the time on the surface where being wrong is most expensive, since a deleted rule stops binding behaviour. The route zero-fills every row through `usage_for_rules`, one aggregate per page — per-row would be N+1 by construction. That matters more here than for snippets: every rule on every existing install predates `rule_usage_events`, so the zero-filled shape IS the common case for a while, and a route that attached the key only where it found events would leave the badge reading undefined on almost every row. `usage_for_rules` had no test at all — step 1 covered the write path and the zero shape and left the aggregate uncovered, which only became load-bearing when a list started rendering it. It now has an integration test over real Postgres, including that a rule with no events comes back zero-filled rather than absent. Recorded as snippet #3460, per the design system's own instruction that the component layer lives as snippets rather than as prose. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01TcCs1CcQ1ormdnzSshKqvN
380 lines
15 KiB
CSS
380 lines
15 KiB
CSS
/* Shared component styles — the house recipes, in one place.
|
||
* ===========================================================================
|
||
*
|
||
* WHY THIS FILE EXISTS
|
||
*
|
||
* `.btn-primary` was defined five times, in five scoped stylesheets, and all
|
||
* five had drifted: three paddings, three font sizes, three disabled opacities,
|
||
* and one view with no disabled style at all (#2273). Nothing detected that,
|
||
* because a scoped duplicate is invisible to every tool — it isn't a rule
|
||
* violation, isn't a broken reference, and isn't a recorded snippet.
|
||
*
|
||
* GEOMETRY LIVES HERE. Every value is a design-system token, so a palette or
|
||
* scale change moves the buttons rather than stranding a copy that no longer
|
||
* matches.
|
||
*
|
||
* A button is `variant + size`, composed in the template:
|
||
* btn-primary a page action
|
||
* btn-primary btn-compact a row action
|
||
* btn-ghost btn-inline an affordance inside a card
|
||
* btn-primary btn-block a form's single submitting action
|
||
* Semantic per-view names (.btn-save, .btn-delete-task, …) were the thing that
|
||
* drifted, because a name says what a button is FOR and nothing about what it
|
||
* should look like — so two buttons doing the same job in two views had no
|
||
* reason to match, and didn't.
|
||
*
|
||
* MIGRATION NOTE — this file is deliberately safe to land ahead of the removals.
|
||
* These are plain selectors (specificity 0,1,0); a Vue `<style scoped>` rule
|
||
* compiles to `.btn-primary[data-v-…]` (0,2,0) and therefore WINS. So a view
|
||
* still carrying its own copy is unaffected until that copy is deleted, and
|
||
* every intermediate state of the migration is coherent.
|
||
*/
|
||
|
||
/* --- the shared shape ---------------------------------------------------- */
|
||
|
||
.btn-primary,
|
||
.btn-secondary,
|
||
.btn-ghost,
|
||
.btn-danger,
|
||
.btn-danger-outline,
|
||
.btn-cta {
|
||
padding: var(--fs-space-2) var(--fs-space-4); /* 8px 16px */
|
||
border: none;
|
||
border-radius: var(--fs-radius-md); /* 8px — the system's button radius */
|
||
font-family: var(--fs-font-body);
|
||
font-size: var(--fs-size-label); /* 12px */
|
||
font-weight: var(--fs-weight-medium); /* 500 — the heaviest the system goes */
|
||
line-height: var(--fs-leading-body);
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
/* So a button carrying an icon centres it against the label without each
|
||
caller re-inventing the flex row — the shape they all reached for
|
||
separately, and the reason icon buttons sat a pixel or two off. */
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--fs-space-2);
|
||
text-decoration: none;
|
||
transition: background var(--fs-dur-fast) var(--fs-ease),
|
||
border-color var(--fs-dur-fast) var(--fs-ease),
|
||
color var(--fs-dur-fast) var(--fs-ease);
|
||
}
|
||
|
||
/* One rule, so a disabled button can never look enabled in one view and
|
||
* disabled in another — which is exactly what ProjectListView shipped, having
|
||
* no disabled style at all. */
|
||
.btn-primary:disabled,
|
||
.btn-secondary:disabled,
|
||
.btn-ghost:disabled,
|
||
.btn-danger:disabled,
|
||
.btn-danger-outline:disabled,
|
||
.btn-cta:disabled {
|
||
opacity: var(--fs-disabled-opacity);
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.btn-primary:focus-visible,
|
||
.btn-secondary:focus-visible,
|
||
.btn-ghost:focus-visible,
|
||
.btn-danger:focus-visible,
|
||
.btn-danger-outline:focus-visible,
|
||
.btn-cta:focus-visible {
|
||
outline: none;
|
||
box-shadow: var(--fs-focus-ring);
|
||
}
|
||
|
||
/* --- variants ------------------------------------------------------------ */
|
||
|
||
/* The accent is deliberately ABSENT from every filled variant. Action colours
|
||
* are universal across the family so a Save button looks identical in every
|
||
* app — the accent is identity, not action. */
|
||
.btn-primary {
|
||
background: var(--fs-action-primary);
|
||
color: var(--fs-text-on-action);
|
||
}
|
||
.btn-primary:not(:disabled):hover {
|
||
background: var(--fs-action-primary-hover);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--fs-action-secondary);
|
||
color: var(--fs-text-on-action);
|
||
}
|
||
.btn-secondary:not(:disabled):hover {
|
||
background: var(--fs-action-secondary-hover);
|
||
}
|
||
|
||
/* Ghost is an OUTLINE, which is why its border and the tertiary action colour
|
||
* are the same token rather than two values that happen to match. Hover moves
|
||
* the BORDER, not the text to the accent — SnippetDetailView tinted the label
|
||
* with the accent on hover, which the house style reserves for identity and
|
||
* active state, not for general chrome. */
|
||
.btn-ghost {
|
||
background: none;
|
||
border: var(--fs-border);
|
||
color: var(--fs-text-primary);
|
||
}
|
||
.btn-ghost:not(:disabled):hover {
|
||
border: var(--fs-border-hover);
|
||
background: var(--fs-surface-hover);
|
||
}
|
||
|
||
/* Destructive is NOT the error colour: an error is a failure that happened, a
|
||
* destructive action is one about to happen. Pair with an icon. */
|
||
.btn-danger {
|
||
background: var(--fs-action-destructive);
|
||
color: var(--fs-text-on-action);
|
||
}
|
||
.btn-danger:not(:disabled):hover {
|
||
background: var(--fs-action-destructive-hover);
|
||
}
|
||
|
||
/* A bare text button: no fill, no border. The most common shape in the dense
|
||
* surfaces — a dismiss, a cancel next to a confirm, a clear-search — where a
|
||
* border would draw a box around something that should read as an action on
|
||
* the text beside it. Distinct from ghost, which IS a box. */
|
||
.btn-text {
|
||
background: none;
|
||
border: none;
|
||
color: var(--fs-text-tertiary);
|
||
padding: var(--fs-space-1) var(--fs-space-2);
|
||
font-family: var(--fs-font-body);
|
||
font-size: var(--fs-size-tiny);
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
transition: color var(--fs-dur-fast) var(--fs-ease);
|
||
}
|
||
.btn-text:not(:disabled):hover { color: var(--fs-text-primary); }
|
||
.btn-text:disabled { opacity: var(--fs-disabled-opacity); cursor: not-allowed; }
|
||
.btn-text:focus-visible { outline: none; box-shadow: var(--fs-focus-ring); }
|
||
|
||
/* Destructive, outlined — fills on hover. Already existed independently in
|
||
* three views before this sheet, which is what makes it a variant rather than
|
||
* a one-off: it is what a delete looks like when it must not shout. */
|
||
.btn-danger-outline {
|
||
background: none;
|
||
border: 1px solid var(--fs-action-destructive);
|
||
color: var(--fs-action-destructive);
|
||
}
|
||
.btn-danger-outline:not(:disabled):hover {
|
||
background: var(--fs-action-destructive);
|
||
color: var(--fs-text-on-action);
|
||
}
|
||
|
||
/* The one place the accent is allowed on a button: a deliberate brand moment,
|
||
* never an ordinary action. The system carries `--fs-gradient-cta` and
|
||
* `--fs-glow-cta` for exactly this and nothing else was using them.
|
||
*
|
||
* It exists because ProjectView's Workspace link WAS this button, defined in a
|
||
* scoped block that the migration deleted — leaving a `:hover` rule with no
|
||
* base and a link that rendered as raw browser blue. A variant living in one
|
||
* view is a variant waiting to be deleted by someone tidying another; this is
|
||
* the shared home so the next sweep can't strand it. */
|
||
.btn-cta {
|
||
background: var(--fs-gradient-cta);
|
||
color: var(--fs-text-on-action);
|
||
box-shadow: var(--fs-glow-cta);
|
||
text-decoration: none;
|
||
}
|
||
.btn-cta:not(:disabled):hover {
|
||
box-shadow: var(--fs-glow-cta-hover);
|
||
}
|
||
|
||
/* --- size modifiers ------------------------------------------------------
|
||
*
|
||
* THREE sizes, because the app genuinely has three. Measured across the ~100
|
||
* bespoke button rules before this scale existed, vertical padding fell into
|
||
* clusters rather than a spread: ~27 at 0.4–0.45rem, ~28 at 0.25–0.3rem, ~23
|
||
* at 0.1–0.15rem. Those are three different components — a page action, a row
|
||
* action, and an affordance living inside a card — that happen to share a name
|
||
* prefix. Collapsing them to one size would visibly break the card layouts.
|
||
*
|
||
* A button carries its size modifier; the DEFAULT (no modifier) is the page
|
||
* action, which is the one the house style specifies.
|
||
*/
|
||
|
||
/* Row actions: a toolbar, a table row, a list item's controls. */
|
||
.btn-compact,
|
||
.btn-small, /* pre-existing spellings, kept so no template churns */
|
||
.btn-sm {
|
||
padding: var(--fs-space-1) var(--fs-space-3); /* 4px 12px */
|
||
font-size: var(--fs-size-tiny);
|
||
}
|
||
|
||
/* Inline affordances: a dismiss ×, a confirm tick, an add-chip — things that
|
||
* sit INSIDE a line of text or a card and must not disturb its rhythm. Below
|
||
* the spacing scale's first step on the vertical axis by necessity: 4px of
|
||
* padding on a 11px label already exceeds the line box these live in. */
|
||
.btn-inline {
|
||
padding: 2px var(--fs-space-1); /* 2px 4px */
|
||
font-size: var(--fs-size-tiny);
|
||
line-height: 1;
|
||
}
|
||
|
||
/* Full width, for a form's single submitting action — the auth screens. Width
|
||
* is orthogonal to size, so it composes: `btn-primary btn-block`. */
|
||
.btn-block {
|
||
display: flex; /* not `block` — the shared shape centres with flex */
|
||
width: 100%;
|
||
padding: var(--fs-space-3) var(--fs-space-4); /* 12px 16px — a touch taller,
|
||
because a full-width button
|
||
is the page's main action */
|
||
font-size: var(--fs-size-body-sm);
|
||
}
|
||
|
||
|
||
/* ── Modal ─────────────────────────────────────────────────────────────────
|
||
The one overlay/card/button shape for every in-app dialog (ConfirmDialog,
|
||
the create-project / merge-snippet / systems dialogs, the editors' confirm
|
||
prompts). Global on purpose: ConfirmDialog teleports to <body> and has no
|
||
styles of its own, so these must be loaded with the app, not with whichever
|
||
view happens to be open. Views add only their own overrides (a wider card,
|
||
a form layout). Destructive = action-destructive per the Hybrid rule. */
|
||
.modal-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: var(--fs-overlay);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 200;
|
||
}
|
||
.modal-card {
|
||
background: var(--fs-surface-raised);
|
||
border: 1px solid var(--fs-border-color);
|
||
border-radius: var(--fs-radius-lg);
|
||
padding: 1.5rem;
|
||
width: 100%;
|
||
max-width: 400px;
|
||
box-shadow: 0 8px 32px var(--color-shadow);
|
||
}
|
||
.modal-title {
|
||
margin: 0 0 0.75rem;
|
||
font-size: 1.05rem;
|
||
}
|
||
.modal-message {
|
||
font-size: 0.9rem;
|
||
color: var(--fs-text-secondary);
|
||
margin: 0 0 1.25rem;
|
||
line-height: 1.5;
|
||
}
|
||
.modal-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 0.5rem;
|
||
}
|
||
.modal-btn {
|
||
padding: 0.4rem 0.9rem;
|
||
border: 1px solid var(--fs-border-color);
|
||
background: var(--fs-surface-raised);
|
||
color: var(--fs-text-primary);
|
||
border-radius: var(--fs-radius-sm);
|
||
cursor: pointer;
|
||
font-size: 0.875rem;
|
||
font-family: inherit;
|
||
}
|
||
.modal-btn:hover {
|
||
background: var(--fs-surface-page);
|
||
}
|
||
.modal-btn-primary {
|
||
background: var(--fs-action-primary);
|
||
border-color: var(--fs-action-primary);
|
||
color: var(--fs-text-on-action);
|
||
}
|
||
.modal-btn-primary:hover:not(:disabled) {
|
||
background: var(--fs-action-primary-hover);
|
||
}
|
||
.modal-btn-primary:disabled {
|
||
opacity: 0.5;
|
||
cursor: default;
|
||
}
|
||
.modal-btn-danger {
|
||
background: var(--fs-action-destructive);
|
||
border-color: var(--fs-action-destructive);
|
||
color: var(--fs-text-on-action);
|
||
}
|
||
.modal-btn-danger:hover {
|
||
background: var(--fs-action-destructive-hover);
|
||
border-color: var(--fs-action-destructive-hover);
|
||
}
|
||
|
||
/* ── Page container ─────────────────────────────────────────────────────────
|
||
The one wrapper a top-level view sits in: page width from the layout
|
||
tokens, centred, clipped horizontally so a wide child (a kanban, a table)
|
||
scrolls inside itself instead of the page. ProjectListView, ProjectView and
|
||
SnippetListView each carried this rule under their own name until #2903
|
||
(milestone 299). */
|
||
.page-container {
|
||
max-width: var(--fs-layout-page-max);
|
||
margin: 2rem auto;
|
||
padding: 0 var(--fs-layout-page-pad);
|
||
overflow-x: clip;
|
||
}
|
||
|
||
/* ── Form input (fs-surfaces, snippet #2336) ────────────────────────────────
|
||
Inputs sit DARKER than the page they're on — an inset well rather than a
|
||
raised panel; that inversion is what makes a field read as writable. The
|
||
design system's recipe, verbatim; width/box-sizing stay the caller's
|
||
(an inline select and a full-width textarea differ there). Three scoped
|
||
copies of an older input recipe were folded into this in #2903. */
|
||
.fs-input {
|
||
background: var(--fs-surface-page);
|
||
border: var(--fs-border);
|
||
border-radius: var(--fs-radius-md);
|
||
padding: var(--fs-space-2) var(--fs-space-3); /* 8px 12px */
|
||
color: var(--fs-text-primary);
|
||
font-family: var(--fs-font-body);
|
||
font-size: var(--fs-size-body);
|
||
transition: box-shadow var(--fs-dur-fast) var(--fs-ease);
|
||
}
|
||
.fs-input::placeholder { color: var(--fs-text-tertiary); }
|
||
.fs-input:focus { outline: none; box-shadow: var(--fs-focus-ring); }
|
||
.fs-input:disabled { opacity: var(--fs-disabled-opacity); cursor: not-allowed; }
|
||
|
||
/* Page scaffold + feedback text recipes (milestone 302, note 2917): name
|
||
families the consumer map showed to be one recipe living in many views.
|
||
A view keeps only its deviation as a scoped remainder/override. */
|
||
.page-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.page-header h1 { margin: 0; }
|
||
|
||
.error-msg { color: var(--fs-error); font-size: 0.9rem; }
|
||
.state-msg { color: var(--fs-text-tertiary); font-size: 0.9rem; }
|
||
.empty-msg { color: var(--fs-text-tertiary); font-size: 0.875rem; }
|
||
|
||
.empty-title { font-size: 1rem; font-weight: 500; color: var(--fs-text-secondary); margin: 0 0 0.35rem; }
|
||
.empty-sub { font-size: 0.85rem; color: var(--fs-text-tertiary); margin: 0 0 1rem; }
|
||
|
||
.required { color: var(--fs-error); }
|
||
.field-hint { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--fs-text-tertiary); }
|
||
|
||
/* --- usage badge ----------------------------------------------------------
|
||
"surfaced N×, opened M×" on a list row, for any record kind the retrieval
|
||
surfaces can choose: snippets and notes from note_usage_events, rules from
|
||
rule_usage_events. Promoted here from SnippetListView's scoped block when
|
||
the rule list needed the same chip (milestone 333 step 5) — a second scoped
|
||
copy is how the ninth duplicated CSS family starts (#3207).
|
||
|
||
Geometry and colour only. A view keeps its own spacing as a scoped
|
||
remainder, the way it does for every other recipe in this file. */
|
||
.usage-tag {
|
||
font-size: 0.7rem;
|
||
padding: 0.1rem 0.4rem;
|
||
border-radius: 4px;
|
||
white-space: nowrap;
|
||
font-variant-numeric: tabular-nums;
|
||
background: color-mix(in srgb, var(--fs-text-tertiary) 15%, transparent);
|
||
color: var(--fs-text-tertiary-fg);
|
||
}
|
||
|
||
/* Dead weight is a nudge, not an error — it warns in the warning colour rather
|
||
than the danger one, because the record isn't broken, just unearned. */
|
||
.usage-tag.usage-dead {
|
||
background: color-mix(in srgb, var(--fs-warning) 18%, transparent);
|
||
color: var(--fs-warning-fg);
|
||
}
|