skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-20 01:56:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix periodic-table view in light mode

Browse Source 
The dark periodic table hardcodes a black stage and near-black tiles
with !important, and the only light override targeted .ptable-cell — a
class the component never emits (it renders .ptable-element). So in light
mode the tiles stayed black while the symbol/name text flipped to dark
ink: black on black, unreadable.

Add a proper light block (with !important to beat the dark rules): a soft
light stage, raised near-white tiles with neutral hairline borders and a
subtle shadow, and a darker hover border. Symbol/name colors and the
category labels already re-theme to dark inks, so they read cleanly.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-06-03 15:16:11 +02:00
co-authored by Claude Opus 4.8
parent 4fda4a0ece
commit 5083000125
1 changed files with 23 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/styles/light-mode.css
+23 -1
View File
@@ -872,7 +872,6 @@ html.light .prose blockquote {
html.light .home-kinpaku .foundation-card,
html.light .home-kinpaku .magazine-container,
html.light .home-kinpaku #framework-viz-container .ptable-cell,
html.light .home-kinpaku .gallery-stack-card,
html.light .home-kinpaku .language-view-toggle,
html.light .home-kinpaku .demo-toggle-switch,
@@ -888,6 +887,29 @@ html.light .home-kinpaku .language-view-tab.is-active {
color: oklch(14% 0.018 95);
}
/* Periodic-table view (#framework-viz-container). The dark styles hardcode a
black stage and near-black tiles with !important, so in light mode the tiles
stayed black while the symbol/name text flipped to dark ink — black on black.
Mirror the dark "crisp neutral card" idea for light: a soft light stage with
raised near-white tiles and neutral hairline borders. Symbol (champagne) and
name (text-muted) already flip to dark, and category stays cued by the
group labels (the --cat-*-text tokens are re-themed for light above).
!important is required to override the dark rules' !important. */
html.light .home-kinpaku .language-view--periodic .solution-visual-interactive {
background: var(--ks-lacquer-deep) !important;
}
html.light .home-kinpaku #framework-viz-container .ptable-element {
background: var(--ks-lacquer-raised) !important;
border-color: var(--ks-rule) !important;
box-shadow: 0 1px 3px oklch(25% 0.02 95 / 0.06) !important;
}
html.light .home-kinpaku #framework-viz-container .ptable-element:is(:hover, :focus-visible) {
border-color: oklch(25% 0.02 95 / 0.32) !important;
box-shadow: 0 4px 14px oklch(25% 0.02 95 / 0.10) !important;
}
html.light .home-kinpaku .install-primary-main,
html.light .home-kinpaku .install-primary-howto,
html.light .home-kinpaku .install-step,