bvandeusenandClaude Opus 5
bd60d679d9
CI & Build / Python lint (push) Successful in 3s
CI & Build / Plugin hooks (push) Successful in 16s
CI & Build / integration (push) Successful in 23s
CI & Build / TypeScript typecheck (push) Successful in 25s
CI & Build / Python tests (push) Successful in 57s
CI & Build / Build & push image (push) Successful in 43s
#2277 counted ~150 "raw colour literals bypassing the tokens". Measuring them told a different story: 184 sat in `var(--token, #fallback)` position, and a check against theme.css shows every one of those tokens IS declared. So the fallbacks could not render. Not drift — vestigial. They were also not this palette. The most common were Tailwind and Flat-UI defaults — #6366f1 indigo, #22c55e green, #f59e0b amber, #3b82f6 blue, #e74c3c and #27ae60 — a second, unsanctioned colour scheme sitting in the codebase looking like the app's colours to anyone reading it. Removing them is not tidying. #2319's lesson is that a fallback is WORSE than a missing token: a missing token renders as nothing and someone eventually notices, while a fallback renders something plausible forever. These 184 were one token rename away from silently repainting the app in Tailwind. The design token check would catch the rename — but the fallback is precisely the thing that would make it invisible if the check were ever bypassed. Literal count 152 -> 45, which matters beyond the number: a report that is mostly unreachable noise is one people stop reading, and then it stops working while still passing. What remains should be genuinely worth looking at. Done with a paren-aware transform, not a regex — `var(--x, rgba(0,0,0,.5))` nests parens and `[^)]+` would cut at the first one and leave `))` behind. Verified after: every changed line is a fallback strip and nothing else, and every var() reference still resolves. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UaYUaouG9jjhATyuxCKrQs
239 lines
4.4 KiB
CSS
239 lines
4.4 KiB
CSS
.prose {
|
|
/* Long-form reading line-height per the design system —
|
|
reading surfaces (notes, tasks, journal, assistant bubbles) want 1.7
|
|
so prose breathes like a book, not a UI snippet. */
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.prose h1 {
|
|
margin: 1.25rem 0 0.5rem;
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.prose h2 {
|
|
margin: 1rem 0 0.4rem;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.prose h3 {
|
|
margin: 0.75rem 0 0.3rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.prose h4,
|
|
.prose h5,
|
|
.prose h6 {
|
|
margin: 0.5rem 0 0.25rem;
|
|
}
|
|
|
|
.prose p {
|
|
margin: 0 0 0.6rem;
|
|
}
|
|
|
|
.prose ul,
|
|
.prose ol {
|
|
margin: 0 0 0.6rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.prose li {
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.prose pre {
|
|
background: var(--color-code-bg);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
padding: 0.75rem;
|
|
overflow-x: auto;
|
|
margin: 0 0 0.6rem;
|
|
}
|
|
|
|
.prose pre code {
|
|
background: none;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.prose code {
|
|
background: var(--color-code-inline-bg);
|
|
border-radius: 3px;
|
|
padding: 0.15rem 0.35rem;
|
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
|
|
"Liberation Mono", monospace;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.prose table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 0 0 0.6rem;
|
|
}
|
|
|
|
.prose th,
|
|
.prose td {
|
|
border: 1px solid var(--color-border);
|
|
padding: 0.4rem 0.6rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.prose thead th {
|
|
background: var(--color-bg-secondary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.prose tbody tr:nth-child(even) {
|
|
background: var(--color-table-stripe);
|
|
}
|
|
|
|
.prose blockquote {
|
|
border-left: 3px solid var(--color-border);
|
|
margin: 0 0 0.6rem;
|
|
padding: 0.25rem 0 0.25rem 0.75rem;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.prose blockquote p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.prose hr {
|
|
border: none;
|
|
border-top: 1px solid var(--color-border);
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.prose img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.prose a {
|
|
color: var(--color-primary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.prose a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.prose .inline-tag {
|
|
color: var(--color-tag-text);
|
|
background: var(--color-tag-bg);
|
|
padding: 0.1rem 0.35rem;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.prose .inline-tag:hover {
|
|
filter: brightness(0.9);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.prose .wikilink {
|
|
color: var(--color-wikilink);
|
|
background: var(--color-wikilink-bg);
|
|
padding: 0.1rem 0.35rem;
|
|
border-radius: 4px;
|
|
text-decoration: none;
|
|
font-size: 0.9em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.prose .wikilink:hover {
|
|
filter: brightness(0.9);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* Task list */
|
|
.prose ul[data-type="taskList"] {
|
|
list-style: none;
|
|
padding-left: 0.25rem;
|
|
}
|
|
|
|
.prose ul[data-type="taskList"] li {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.prose ul[data-type="taskList"] li > label {
|
|
flex-shrink: 0;
|
|
user-select: none;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.prose ul[data-type="taskList"] li > label input[type="checkbox"] {
|
|
cursor: pointer;
|
|
accent-color: var(--color-primary);
|
|
width: 0.95em;
|
|
height: 0.95em;
|
|
margin: 0;
|
|
}
|
|
|
|
.prose ul[data-type="taskList"] li > div {
|
|
flex: 1;
|
|
}
|
|
|
|
.prose ul[data-type="taskList"] li[data-checked="true"] > div {
|
|
text-decoration: line-through;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* Interactive checkboxes — marked output in the list-note viewer */
|
|
.prose--checklist ul {
|
|
list-style: none;
|
|
padding-left: 0.25rem;
|
|
}
|
|
.prose--checklist li {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
.prose--checklist li input[type="checkbox"] {
|
|
flex-shrink: 0;
|
|
accent-color: var(--color-primary);
|
|
cursor: pointer;
|
|
width: 0.95em;
|
|
height: 0.95em;
|
|
margin: 0;
|
|
}
|
|
.prose--checklist li:has(input[type="checkbox"]:checked) > p,
|
|
.prose--checklist li:has(input[type="checkbox"]:checked) {
|
|
text-decoration: line-through;
|
|
color: var(--color-text-muted);
|
|
}
|
|
.prose--checklist li:has(input[type="checkbox"]:checked) input[type="checkbox"] {
|
|
text-decoration: none; /* don't strike through the checkbox itself */
|
|
}
|
|
|
|
/* Tiptap editor */
|
|
.tiptap-editor .ProseMirror {
|
|
outline: none;
|
|
min-height: 200px;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
|
|
color: var(--color-text-muted);
|
|
content: attr(data-placeholder);
|
|
float: left;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tiptap-wrapper {
|
|
border: 1px solid var(--color-input-border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--color-bg-card);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.tiptap-wrapper:focus-within {
|
|
box-shadow: var(--focus-ring);
|
|
}
|