skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-11 21:57:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix dark changelog/FAQ cards in light mode

Browse Source 
The changelog + FAQ pages share changelog-faq-kinpaku.css, which paints its
card/panel/pill backgrounds with literal dark oklch(8% …) values that don't
flip with the theme. The only light override was dead twice over: scoped to a
.changelog-faq-kinpaku wrapper that's never on the body (these pages use
.kinpaku-surface), and naming the wrong elements (.faq-item/.changelog-entry
instead of the cf-prefixed classes). So the cards stayed near-black on the
light page.

Replace that dead block with correct html.light .cf-* rules: flip the card
surfaces (cf-entry, cf-stats, cf-faq-item, cf-entry--current), the before/after
frame + before tag (cf-ba-shot, cf-ba-tag--before) to the shared light card
treatment, and drop the bright-kinpaku accents (cf-version, cf-stat-num,
cf-current-badge, cf-ba-tag--after, cf-faq-question) to --ks-kinpaku-ink so
they stay legible on paper, matching the .cf-eyebrow. Answer-body tokens
already flip, so they're untouched. Dark mode unaffected.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-06-05 08:42:22 -07:00
co-authored by Claude Opus 4.8
parent 198aa91719
commit 6c7c04866c
1 changed files with 36 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/styles/light-mode.css
+36 -3
View File
@@ -792,10 +792,43 @@ html.light .live-mode-kinpaku .live-mode-terminal {
0 20px 48px -14px oklch(25% 0.02 95 / 0.12);
}
html.light .changelog-faq-kinpaku .changelog-entry,
html.light .changelog-faq-kinpaku .faq-item {
/* Changelog + FAQ cards (cf-*). These pages paint their card / panel / pill
backgrounds with literal dark oklch values that don't flip with the theme, so
in light mode the cards stayed near-black on the light page. The earlier
override here was dead twice over: it targeted a .changelog-faq-kinpaku
wrapper that is never on the body, and the wrong (.faq-item / .changelog-entry)
element names — the real classes are cf-prefixed. Flip the actual surfaces to
the shared light card treatment, and drop the bright-kinpaku accents to
--ks-kinpaku-ink so they stay legible on paper (matching the .cf-eyebrow). */
html.light .cf-entry,
html.light .cf-stats,
html.light .cf-faq-item {
background:
linear-gradient(135deg, oklch(77% 0.13 82 / 0.06), transparent 44%),
var(--ks-lacquer-raised);
box-shadow: inset 0 0 0 1px oklch(77% 0.13 82 / 0.05);
}
html.light .cf-entry--current {
background:
linear-gradient(135deg, oklch(77% 0.13 82 / 0.12), transparent 52%),
var(--ks-lacquer-raised);
}
html.light .cf-ba-shot {
background: var(--ks-lacquer-raised);
border-color: var(--ks-rule);
}
html.light .cf-ba-tag--before {
background: oklch(99% 0.008 95 / 0.7);
}
html.light .cf-version,
html.light .cf-stat-num,
html.light .cf-current-badge,
html.light .cf-ba-tag--after,
html.light .cf-faq-question {
color: var(--ks-kinpaku-ink);
}
/* ============================================================