ZDDC
538167b5c8
transmittal/css/utilities.css hand-rolled a Tailwind-style utility
subset against hardcoded grayscale (#fff, #f9fafb, #d1d5db etc.)
tuned for light mode. Dark mode then needed a 17-line block of
!important rules in transmittal/css/base.css to swing each utility
class's background/text/border colors. That block was the worst
concentration of !important in the repo.
Tokenize the grayscale classes against shared CSS custom properties
(var(--bg), var(--bg-secondary), var(--text), var(--text-muted),
var(--border)) so the cascade picks up dark mode automatically:
.bg-white, .bg-gray-50, .bg-gray-100 → var(--bg) / var(--bg-secondary)
.text-gray-{400..700,900} → var(--text-muted) / var(--text)
.border, .border-{b,t}, .border-gray-* → var(--border)
.hover:bg-gray-{50,100} → var(--bg-hover)
.focus:bg-white:focus → var(--bg)
Named-color text classes (.text-blue-600 / -green-600 / -red-600)
stay hardcoded — they encode link / success / danger semantics that
should not theme-shift.
The .table-filter-input dark-mode block also went — it was unused
(no element references it; .column-filter from shared is what gets
applied to the actual filter inputs).
!important count in transmittal's non-print CSS dropped from ~32 to
~12. The 6 transmittal Playwright specs still pass.
Verification needed: visually inspect transmittal in both light and
dark mode and flag any color regression. The token mapping is
mechanical but the live rendered output is the only proof.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
119 lines
4.2 KiB
CSS
119 lines
4.2 KiB
CSS
/* Placeholder for contenteditable elements */
|
|
[data-placeholder]:empty::before {
|
|
content: attr(data-placeholder);
|
|
color: var(--text-muted);
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Hide elements that should be hidden when JavaScript is available */
|
|
[data-hydrate-hide] {
|
|
display: none;
|
|
}
|
|
|
|
@media screen {
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background: var(--bg-secondary);
|
|
}
|
|
|
|
.stack-below-600 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.page-container {
|
|
width: 100%;
|
|
max-width: 8.5in;
|
|
margin: 20px auto;
|
|
padding: 0.375in;
|
|
min-height: 0;
|
|
background: var(--bg);
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid var(--border);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.stack-below-600 {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.page-container {
|
|
padding: 12px;
|
|
}
|
|
}
|
|
|
|
/* ── Dark mode overrides for transmittal-specific hardcoded colours ──────── */
|
|
/* Covers verify cards, table rows, path-diff, integrity cards, workflow badge */
|
|
/* and Tailwind utility classes used as attributes in template.html. */
|
|
@media screen {
|
|
/* Integrity verify cards */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) .verify-card--ok { background: #052e16; }
|
|
:root:not([data-theme="light"]) .verify-card--fail { background: #2d0c0c; }
|
|
:root:not([data-theme="light"]) .verify-card--draft { background: #2d2305; }
|
|
:root:not([data-theme="light"]) .verify-card--info { background: #0c1a2e; }
|
|
}
|
|
[data-theme="dark"] .verify-card--ok { background: #052e16; }
|
|
[data-theme="dark"] .verify-card--fail { background: #2d0c0c; }
|
|
[data-theme="dark"] .verify-card--draft { background: #2d2305; }
|
|
[data-theme="dark"] .verify-card--info { background: #0c1a2e; }
|
|
|
|
/* Per-row verify result rows in file table */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) tr.verify-match td { background: #052e16; }
|
|
:root:not([data-theme="light"]) tr.verify-mismatch td { background: #2d0c0c; }
|
|
:root:not([data-theme="light"]) tr.verify-missing td { background: #2d2305; }
|
|
:root:not([data-theme="light"]) tr.verify-new td { background: #0c1a2e; }
|
|
}
|
|
[data-theme="dark"] tr.verify-match td { background: #052e16; }
|
|
[data-theme="dark"] tr.verify-mismatch td { background: #2d0c0c; }
|
|
[data-theme="dark"] tr.verify-missing td { background: #2d2305; }
|
|
[data-theme="dark"] tr.verify-new td { background: #0c1a2e; }
|
|
|
|
/* Workflow warning badge */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) .workflow-badge--warn {
|
|
background: #2d2305;
|
|
color: #fcd34d;
|
|
border-color: #92400e;
|
|
}
|
|
}
|
|
[data-theme="dark"] .workflow-badge--warn {
|
|
background: #2d2305;
|
|
color: #fcd34d;
|
|
border-color: #92400e;
|
|
}
|
|
|
|
/* Path diff semantic colours (verify mismatch) */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]) .path-diff del {
|
|
color: #fca5a5;
|
|
background: #2d0c0c;
|
|
}
|
|
:root:not([data-theme="light"]) .path-diff ins {
|
|
color: #86efac;
|
|
background: #052e16;
|
|
border-bottom-color: #86efac;
|
|
}
|
|
}
|
|
[data-theme="dark"] .path-diff del { color: #fca5a5; background: #2d0c0c; }
|
|
[data-theme="dark"] .path-diff ins {
|
|
color: #86efac;
|
|
background: #052e16;
|
|
border-bottom-color: #86efac;
|
|
}
|
|
|
|
/* Note: dark-mode overrides for .bg-white / .bg-gray-* / .text-gray-*
|
|
/ .border-gray-* and .header-names used to live here as a 17-line
|
|
block of !important rules to fight hardcoded colors in
|
|
transmittal/css/utilities.css. The utility classes were tokenized
|
|
(var(--bg), var(--bg-secondary), var(--text), var(--text-muted),
|
|
var(--border)) so the cascade now does the right thing in both
|
|
themes without per-class overrides. .table-filter-input is unused
|
|
(no element references it; .column-filter from shared is used
|
|
instead) and was likewise dropped. */
|
|
}
|