From 50830001251994b21f8eb70a14180dc8d5d26bf8 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 3 Jun 2026 15:16:11 +0200 Subject: [PATCH] Fix periodic-table view in light mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- site/styles/light-mode.css | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/site/styles/light-mode.css b/site/styles/light-mode.css index 34d2ee223..79c460864 100644 --- a/site/styles/light-mode.css +++ b/site/styles/light-mode.css @@ -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,