bvandeusenandClaude Opus 5
d0a2733cb6
CI & Build / Plugin hooks (push) Successful in 11s
CI & Build / Python lint (push) Successful in 3s
CI & Build / TypeScript typecheck (push) Successful in 36s
CI & Build / integration (push) Successful in 34s
CI & Build / Python tests (push) Successful in 1m12s
CI & Build / Build & push image (push) Successful in 1m2s
The badge fix (#3132) exposed the same defect everywhere: 48 rules painting a token as TEXT on an inline color-mix tint of that same token. Worst raw measurements, across every tint strength in use, both modes, over page/raised/hover: accent 1.53:1 · success 1.67:1 · text-tertiary 2.15:1 warning 2.32:1 · error 2.36:1 against AA's 4.5 THE DEFECT IS IN THE HOUSE, NOT IN SCRIBE. The semantic hues are shared family-wide, and the accent case was measured against every app's real accent, not assumed from Scribe's: Minstrel 1.81, Forge 1.87, Steward 1.65, Roundtable 3.01 — all failing. So the six -fg tokens are recorded on FabledSword (design system 1), where their parents live, rather than copied into each app. 45% toward --fs-text-primary clears AA for ALL FIVE accents (4.56-5.00), so this is one house token rather than five overrides, and it keeps deriving from --fs-accent — an app that overrides its accent still gets a legible tinted-text colour in its own colour, the same mechanism as --fs-accent-soft. The tokens are additive: a sibling app is unaffected until it regenerates its own stylesheet. One token is honestly redundant. --fs-text-secondary already passes at 4.82:1, and --fs-text-secondary-fg barely moves it. It exists so the rule has NO exceptions, because the alternative is a permanent allow-list entry for the one case that happens to pass — and a guard with an invisible exception is a guard that erodes. 46 substitutions across 18 files, each rewriting only the `color:` inside a block that tints its own background. THE CHECK NOW GATES BOTH SPELLINGS. It previously reported the inline form, because a gate nobody can satisfy on the day it lands gets switched off. Both are clean, so both fail the build now. And the check had a false-positive bug worth naming: its `color\s*:` regex matched the tail of `border-color`, `border-left-color` and `outline-color`, so it flagged seven rules that were already correct. A border is a non-text graphic with a 3:1 floor, not text at 4.5. A check that cries wolf on correct code is one that gets muted, so that mattered more than the noise. Verified by construction, not by passing: reintroduced each defect form (exit 1 each), and confirmed a legitimate border-only rule still exits 0. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
393 lines
9.4 KiB
CSS
393 lines
9.4 KiB
CSS
/* ── Layout ── */
|
|
.editor-page {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.editor-header {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
padding: 1rem 1.5rem 0.5rem;
|
|
border-bottom: 1px solid var(--fs-border-color);
|
|
}
|
|
|
|
/* ── Toolbar & inputs ── */
|
|
.toolbar {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
/* Save: Moss action-primary per the Hybrid rule. Saving is "operating
|
|
the software" — not a brand moment. Accent gradient is reserved for
|
|
Send / empty-state CTAs. */
|
|
/* Delete: Oxblood action-destructive per Hybrid rule. Should be paired
|
|
with a Trash icon at the call site to reinforce intent. */
|
|
.title-input:focus {
|
|
outline: none;
|
|
border-bottom-color: var(--fs-accent);
|
|
}
|
|
.title-input::placeholder {
|
|
color: var(--fs-text-tertiary);
|
|
font-weight: 400;
|
|
}
|
|
.editor-tabs {
|
|
display: flex;
|
|
gap: 0;
|
|
border-bottom: 1px solid var(--fs-border-color);
|
|
}
|
|
.tab {
|
|
padding: 0.45rem 1rem;
|
|
border: none;
|
|
background: none;
|
|
color: var(--fs-text-secondary);
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
border-bottom: 2px solid transparent;
|
|
}
|
|
.tab.active {
|
|
color: var(--fs-accent);
|
|
border-bottom-color: var(--fs-accent);
|
|
}
|
|
.preview-pane {
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--fs-border-color);
|
|
border-radius: var(--fs-radius-sm);
|
|
min-height: 200px;
|
|
background: var(--fs-surface-raised);
|
|
}
|
|
|
|
/* ── Tag suggestions ── */
|
|
.tag-suggest-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
}
|
|
.tag-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.2rem;
|
|
padding: 0.2rem 0.55rem;
|
|
border: 1px solid var(--fs-accent);
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
color: var(--fs-accent);
|
|
font-size: 0.8rem;
|
|
cursor: pointer;
|
|
transition: background 0.15s, color 0.15s;
|
|
}
|
|
.tag-pill:hover:not(:disabled) {
|
|
background: var(--fs-accent);
|
|
color: var(--fs-text-on-action);
|
|
}
|
|
.tag-pill.applied {
|
|
background: var(--fs-success);
|
|
border-color: var(--fs-success);
|
|
color: var(--fs-text-on-action);
|
|
cursor: default;
|
|
}
|
|
.tag-check {
|
|
font-size: 0.7rem;
|
|
}
|
|
.assist-instruction {
|
|
width: 100%;
|
|
padding: 0.5rem 0.65rem;
|
|
border: 1px solid var(--fs-border-color);
|
|
border-radius: var(--fs-radius-sm);
|
|
font-size: 0.88rem;
|
|
font-family: inherit;
|
|
resize: vertical;
|
|
background: var(--fs-surface-page);
|
|
color: var(--fs-text-primary);
|
|
box-sizing: border-box;
|
|
min-height: 3.5rem;
|
|
}
|
|
.assist-input-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* Active hint shown in the panel while output is inline */
|
|
.assist-active-hint {
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.8rem;
|
|
color: var(--fs-text-tertiary);
|
|
text-align: center;
|
|
}
|
|
|
|
/* Error */
|
|
.assist-error {
|
|
padding: 0.5rem 0.75rem;
|
|
background: color-mix(in srgb, var(--fs-error) 10%, transparent);
|
|
border: 1px solid var(--fs-error);
|
|
border-radius: var(--fs-radius-sm);
|
|
font-size: 0.85rem;
|
|
color: var(--fs-error-fg);
|
|
}
|
|
.diff-view {
|
|
border: 1px solid var(--fs-border-color);
|
|
border-radius: var(--fs-radius-sm);
|
|
background: var(--fs-surface-page);
|
|
font-size: 0.82rem;
|
|
font-family: monospace;
|
|
max-height: 340px;
|
|
overflow-y: auto;
|
|
padding: 0.4rem 0;
|
|
}
|
|
.diff-line {
|
|
display: flex;
|
|
align-items: baseline;
|
|
padding: 0.05rem 0.5rem;
|
|
line-height: 1.5;
|
|
}
|
|
.diff-delete {
|
|
background: color-mix(in srgb, var(--fs-error) 12%, transparent);
|
|
color: var(--fs-error-fg);
|
|
}
|
|
.diff-insert {
|
|
background: color-mix(in srgb, var(--fs-success) 12%, transparent);
|
|
color: var(--fs-success-fg);
|
|
}
|
|
.diff-equal {
|
|
color: var(--fs-text-tertiary);
|
|
}
|
|
.diff-marker {
|
|
flex-shrink: 0;
|
|
width: 1rem;
|
|
text-align: center;
|
|
user-select: none;
|
|
font-weight: 500;
|
|
}
|
|
.diff-text {
|
|
flex: 1;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
.diff-empty {
|
|
padding: 0.5rem;
|
|
color: var(--fs-text-tertiary);
|
|
font-size: 0.82rem;
|
|
}
|
|
.assist-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* ── Floating inline assist button (teleported to body) ── */
|
|
.inline-assist-btn {
|
|
position: fixed;
|
|
z-index: 100;
|
|
transform: translateX(-50%);
|
|
padding: 0.3rem 0.75rem;
|
|
background: var(--fs-action-primary);
|
|
color: var(--fs-text-on-action);
|
|
border: none;
|
|
border-radius: var(--fs-radius-sm);
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
box-shadow: 0 2px 8px var(--color-shadow);
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* ── Sidebar shared styles ── */
|
|
.sidebar-toggle {
|
|
display: none;
|
|
width: 100%;
|
|
padding: 0.6rem 1rem;
|
|
background: var(--fs-surface-raised);
|
|
border: none;
|
|
border-bottom: 1px solid var(--fs-border-color);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
color: var(--fs-text-secondary);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
font-family: inherit;
|
|
}
|
|
.sidebar-content {
|
|
padding: 0.75rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.65rem;
|
|
}
|
|
.sb-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
.sb-label {
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
color: var(--fs-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.sb-select,
|
|
.sb-input {
|
|
width: 100%;
|
|
padding: 0.35rem 0.5rem;
|
|
border: 1px solid var(--fs-border-color);
|
|
border-radius: var(--fs-radius-sm);
|
|
background: var(--fs-surface-raised);
|
|
color: var(--fs-text-primary);
|
|
font-size: 0.875rem;
|
|
font-family: inherit;
|
|
box-sizing: border-box;
|
|
}
|
|
.sb-select:focus,
|
|
.sb-input:focus {
|
|
outline: none;
|
|
border-color: var(--fs-accent);
|
|
}
|
|
.sb-divider {
|
|
height: 1px;
|
|
background: var(--fs-border-color);
|
|
margin: 0.15rem 0;
|
|
}
|
|
@media (max-width: 720px) {
|
|
.sidebar-toggle { display: block; }
|
|
.sidebar-content {
|
|
display: none;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
.sidebar-content.sidebar-open { display: flex; }
|
|
}
|
|
|
|
/* ── Mobile ── */
|
|
@media (max-width: 768px) {
|
|
.editor-header {
|
|
padding: 0.75rem 1rem 0.5rem;
|
|
}
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Editor button aliases.
|
|
*
|
|
* These names are used across six views, so they alias onto the shared variants
|
|
* rather than every call site being rewritten — the class stays the app's, the
|
|
* appearance comes from components.css. Same reasoning as .btn-small: a name
|
|
* already in the templates is cheaper to point somewhere than to replace.
|
|
*
|
|
* They are @extend-shaped, which CSS lacks, so each carries the variant's own
|
|
* declarations. That is the one duplication this migration cannot remove — but
|
|
* it is duplication of a REFERENCE (a var()), not of a value, so a palette
|
|
* change still moves everything at once.
|
|
* ------------------------------------------------------------------------ */
|
|
|
|
.btn-accept,
|
|
.btn-generate,
|
|
.btn-save {
|
|
background: var(--fs-action-primary);
|
|
color: var(--fs-text-on-action);
|
|
border: none;
|
|
}
|
|
.btn-accept:not(:disabled):hover,
|
|
.btn-generate:not(:disabled):hover,
|
|
.btn-save:not(:disabled):hover {
|
|
background: var(--fs-action-primary-hover);
|
|
}
|
|
|
|
.btn-back,
|
|
.btn-clear,
|
|
.btn-reject,
|
|
.btn-proofread,
|
|
.btn-suggest-tags {
|
|
background: none;
|
|
border: var(--fs-border);
|
|
color: var(--fs-text-primary);
|
|
}
|
|
.btn-back:not(:disabled):hover,
|
|
.btn-clear:not(:disabled):hover,
|
|
.btn-reject:not(:disabled):hover,
|
|
.btn-proofread:not(:disabled):hover,
|
|
.btn-suggest-tags:not(:disabled):hover {
|
|
border: var(--fs-border-hover);
|
|
background: var(--fs-surface-hover);
|
|
}
|
|
|
|
.btn-delete {
|
|
background: var(--fs-action-destructive);
|
|
color: var(--fs-text-on-action);
|
|
border: none;
|
|
}
|
|
.btn-delete:not(:disabled):hover {
|
|
background: var(--fs-action-destructive-hover);
|
|
}
|
|
|
|
/* Shared geometry for every alias above. */
|
|
.btn-accept, .btn-generate, .btn-save, .btn-back, .btn-clear, .btn-reject,
|
|
.btn-delete, .btn-dismiss-tags, .btn-proofread, .btn-suggest-tags {
|
|
border-radius: var(--fs-radius-md);
|
|
font-family: var(--fs-font-body);
|
|
font-weight: var(--fs-weight-medium);
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
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);
|
|
}
|
|
.btn-accept, .btn-generate, .btn-save, .btn-back, .btn-clear, .btn-reject,
|
|
.btn-delete {
|
|
padding: var(--fs-space-2) var(--fs-space-4);
|
|
font-size: var(--fs-size-label);
|
|
}
|
|
.btn-proofread, .btn-suggest-tags {
|
|
padding: var(--fs-space-1) var(--fs-space-3);
|
|
font-size: var(--fs-size-tiny);
|
|
}
|
|
.btn-dismiss-tags {
|
|
background: none;
|
|
border: none;
|
|
color: var(--fs-text-tertiary);
|
|
padding: 2px var(--fs-space-1);
|
|
font-size: var(--fs-size-tiny);
|
|
line-height: 1;
|
|
}
|
|
.btn-dismiss-tags:hover { color: var(--fs-text-primary); }
|
|
|
|
.btn-accept:disabled, .btn-generate:disabled, .btn-save:disabled,
|
|
.btn-back:disabled, .btn-clear:disabled, .btn-reject:disabled,
|
|
.btn-delete:disabled, .btn-proofread:disabled, .btn-suggest-tags:disabled,
|
|
.btn-dismiss-tags:disabled {
|
|
opacity: var(--fs-disabled-opacity);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Shared by NoteEditorView and TaskEditorView — both carried identical scoped
|
|
copies of these until #2903 (milestone 299); one source here. */
|
|
.body-tabs-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
flex-wrap: wrap;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid var(--fs-border-color);
|
|
}
|
|
.body-editor-wrap {
|
|
min-height: 200px;
|
|
}
|
|
.stream-preview {
|
|
border: 1px solid var(--fs-border-color);
|
|
border-radius: var(--fs-radius-sm);
|
|
padding: 0.75rem;
|
|
background: var(--fs-surface-raised);
|
|
min-height: 200px;
|
|
}
|
|
.main-diff {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
.assist-section-title {
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
color: var(--fs-text-secondary);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|